Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Optymalizacja animacji SVG


9 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 22 kwietnia 2015 - 11:55

#1

Bazując na tym prostym tricku http://jakearchibald...ne-drawing-svg/ próbowałem stworzyć animację szkicu linii produkcyjnej dla swojej firmy. Coś w tym stylu: http://jsfiddle.net/...moo83/fc83a4t0/

O ile animacja w tej formie działa nawet nieźle to objętość kodu jest już spora. Przy bardziej skomplikowanym pliku SVG mam do czynienia z kilkuset liniami kodu, który od razu zawiesza mi przeglądarkę przy próbie animacji. Jest jakaś mozliwość zoptymalizowania takiego pliku? Czy może po prostu "ten typ tak ma" i SVG to nie jest dobry sposób na robienie tego typu animacji. Od razu zaznaczam, ze odpadają rozwiązania typu Flash bo z założenia ma to działać pod każdą przeglądarką/systemem.

EDIT: Animacja nie działa pod IE ale nad tym się bede głowił później


Użytkownik przemoo83 edytował ten post 22 kwietnia 2015 - 11:58

  • -2

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 22 kwietnia 2015 - 15:10

#2

SMIL jest dobry do prostych, zapętlanych animacji. I tak samo jak css keyframes nie nadaje się do (a)synchronicznej animacji wielu elementów.

Do tego co chcesz osiągnąć nadaje się wyłącznie javascript. A konkretniej gotowa biblioteka, która załatwi prawie wszystko ;)

do wyboru:

http://snapsvg.io

http://www.greensock.com/gsap-js/

http://julian.com/research/velocity/
 

choć to nie wszystkie, a na dodatek tylko ułatwiacze w miejsce zastosowania m.in. jquery


  • 1

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 23 kwietnia 2015 - 07:31

#3

Hmm..szkoda bo wszystkie grafiki mam już przygotowane w tym zapisie więc robiłem tylko kopiuj/wklej. Tych bibliotek nie znam ale o Snap słyszałem dużo dobrych opinii. Nawet tu na forum mi polecano, wiec pora się w końcu zagłebić :)


  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 23 kwietnia 2015 - 11:42

#4

Hmm..szkoda bo wszystkie grafiki mam już przygotowane w tym zapisie więc robiłem tylko kopiuj/wklej. 

Przygotowanym SVG nic nie będzie. To przecież nie binarka tylko goły txt, na którym wykonywane są wszystkie animacje przy użyciu powyższych jsowych "biblioteczek" ;)


  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 23 kwietnia 2015 - 12:33

#5

Aaa że w ten sposób :)  myślalem, że będzie potrzeba jakiegoś całkowiecie nowego "przerenderowania" tych grafik. Jak tak to git B)


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 23 kwietnia 2015 - 13:41

#6

Aaa że w ten sposób :)  myślalem, że będzie potrzeba jakiegoś całkowiecie nowego "przerenderowania" tych grafik. Jak tak to git B)

Obędzie się tutaj bez gita ;p taki suchar


  • 3

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 23 kwietnia 2015 - 14:22

#7

Masz +1 za suchara :P


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 09 maja 2015 - 16:52

#8

Jeszcze takie coś mi się przypomniało:  http://codyhouse.co/...h-css-and-snap/


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 02 czerwca 2015 - 11:46

#9

#css:

 

https://cssanimation.rocks/buffer/


  • 0

webDeveloper


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 02 czerwca 2015 - 12:28

#10

#css:
 
https://cssanimation.rocks/buffer/


Fajne;)
  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych