Komentarze do: Prosta animacja z wykorzystaniem SVG i JavaScript

Autor: piotrabc

piotrabc — Sun, 23 Feb 2014 21:48:00 +0000

Hej! Jest szybszy sposób na trybik w Inkscape: Efekty -> Renderowanie -> Koło Zębate.
Wtedy cała metoda staje się jeszcze szybsza.
Przydatny art. Pozdrawiam

Autor: Comandeer

Comandeer — Mon, 23 Dec 2013 17:17:00 +0000

W odpowiedzi do Comandeer. Jest problem z zejściem ;) Ale nie jest to próg 10ms, jak wcześniej sądziłem. Otóż minimalny czas oczekiwania w przypadku timerów jest określony w specyfikacji HTML5 i wynosi 4ms. https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout#Minimum.2F_maximum_delay_and_timeout_nesting

Autor: Comandeer

Comandeer — Sat, 07 Dec 2013 22:28:00 +0000

W odpowiedzi do Michał Załęcki. wiem, że był problem z tym zejściem. no a requestFrameAnimation ma tą przewagę nad timerami, że korzysta z pętli rysującej (tej samej co CSS), więc AFAIR ma wspomaganie przez GPU. no i nie ma takiej rygorystycznej natury, co one co pomaga przy animowaniu. a co do IE 9 - polyfill jest banalny ;) window.requestAnimationFrame=function(fn){setTimeout(fn,1000/60);}; tak najprościej mówiąc a w jQuery pętli nie ma? ;) w JS przecież też można ładnie [].forEach.call(document.querySelectorAll('.nasze#trybiki'),function(t){t.setAttribute('transform','blabla');}); może nie jest aż tak pięknie jak w jQuery, ale wciąż czytelnie

Autor: Michał Załęcki

Michał Załęcki — Sat, 07 Dec 2013 22:23:00 +0000

W odpowiedzi do Comandeer. Niezastąpiony Comandeer :) Zmieniłem kod o tyle, by nie szukał za każdym razem trybika tylko zapisałem je w zmiennych. Patrząc prawdzie w oczy to przy większych zabawach z czymkolwiek dochodzimy do problemów z wydajnością (np. checkboxy wyświetlające piłkę, wrzucałem to na webroadowego facebooka kilka dni temu). Ja nie mam problemów z zejściem poniżej 10ms, ani na lisku, ani na IE11 na desktopie, ani na IE10 na telefonie. Korzystając z requestAnimationFrame, o ile się nie mylę, żegnamy się z IE9 więc sobie to odpuściłem na wstępie. Ja przy jQuery będę się upierał. Na tym prostym przykładzie z dwoma trybikami może faktycznie nie widać wyższości jQuery nad rozwiązaniem bez niej, ale na swojej stronie mam kilka takich trybików i mogę bez problemu przeprowadzić niejawną iterację. W "czystym" JS będę już musiał wprowadzić pętlę i tracę tym samym na prostocie kodu. Myślę, że do poradnika takie rozwiązanie bardziej przemawia do ludzi.

Autor: Comandeer

Comandeer — Sat, 07 Dec 2013 19:01:00 +0000

http://css-tricks.com/svg-tabs-using-svg-shape-template/ ;) ale sam pomysł jest genialny.

ciekawi mnie dlaczego format grafiki od wieków miał wbudowany w sobie system szablonów a HTML dochrapał się go dopiero ostatnio, pod postacią tagu template i link[rel=import]. inna rzecz, że SVG nigdy nie zdobył wcześniej takiej popularności (ciekawe czemu, prawda Microsoft?)

wartałoby także zaznaczyć, że domyślnie SVG pracować powinien tylko w trybie XML a jego inlinowanie w HTML-u dostępne jest teoretycznie dopiero w HTML 5. no i przy większych zabawach z SVG możemy dojść do problemów z wydajnością (bo to DOM w końcu)

co do samego JS – AFAIR minimalnym czasem odstępu dla timerów jest 20ms i żaden browser poniżej tego pułapu nie schodzi (stąd też takie usilne parcie na to, żeby Chrome i lisek w końcu wprowadziły wsparcie dla setImmediate, zwłaszcza, że polyfille dla nich działają szybciej od natywnej implementacji w IE…). zresztą dla animacji i tak istnieje requestAnimationFrame i to właśnie jego powinno się używać. w połączeniu z techniką delta timing pozwala tworzyć płynniejsze animacje (bo tutaj będziemy mieli przestój i już płynność wiadomo co trafi). no i zaciągnięcie jQuery dla ustawienia wartości CSS dwóch elementów mnie drażni. bardzo…