2016-12-03 34 views
19

Obecnie próbuję animacji angular2 i zastanawiałem się, jaką konkretną przewagę przynoszą nad standardowymi animacjami/przejściami css.animacja kątowa 2 a animacja css - kiedy użyć czego?

np. typowy materiał zaprojektowany z efektami kartek i hover z cieniami pudełek. Większość frameworków css używa: hover i css-transitions. Czy używanie animacji kątowych 2 ma szczególną zaletę?

Czytałem gdzieś, że niektóre właściwości animacji css nie odwołują się do GPU tak bardzo, dlatego są opóźnienia i opóźnienia. A co z animacjami angular2?

+2

Cóż, nie wiem zbyt wiele na temat Angular, ale myślę, że po prostu wykorzystują animacje CSS. [W rzeczywistości ich doktorzy mówią] (https://angular.io/docs/ts/latest/guide/animations.html): * "System animacji Angular pozwala tworzyć animacje, które działają ** z tą samą rodzimą wydajnością * * znalezione w czystych animacjach CSS. "*. Określają również, że używają [animacji internetowych] (https: //w3c.gitub.io/web-animations /) where [possible] (http://caniuse.com/#feat=web-animation). To pierwsze trafienie, gdy szukasz "animacji kątowej 2" – GolezTrol

+1

Wierzę, że animacje angular2 po prostu tworzą animację css, gdy są kompilowane. Zaletą jest to, że łatwiej jest dodawać i kontrolować animacje na poziomie komponentu. –

+0

dziękuję za szybką odpowiedź, więc w zasadzie to, co dostaję z kątowymi 2 animacjami to metody (takie jak animat() i style()), które sprawiają, że animacje są łatwiejsze do kontrolowania (?) –

Odpowiedz

19

Pytanie jest w rzeczywistości więcej niż animacja javascript vs animacja css (ponieważ animacje angular2 są oparte na animacji javascript).

Odpowiedź jest taka, że ​​kiedy można - użyć animacji CSS.

Nowoczesne przeglądarki używają different thread dla animacji CSS, więc animacje CSS nie mają wpływu na wątek javascript.

Możesz użyć HTML5 Animation Speed Test, aby sprawdzić wydajność różnych frameworków (opartych na javscript) animacji VS CSS w przeglądarce.

Ogólnie:

przeglądarki to w stanie zoptymalizować przepływ wytapiania. Podsumowując, zawsze powinniśmy starać się tworzyć nasze animacje za pomocą przejść/animacji CSS tam, gdzie to możliwe. Jeśli twoje animacje są naprawdę skomplikowane, być może będziesz musiał polegać na animacjach opartych na JavaScript.

Jeśli chcesz wiedzieć konkretnie w odniesieniu do animacji Angular2 - wystarczy sprawdzić element w przeglądarce i sprawdzić, czy animacja jest CSS (przejście/animationFrame oparte lub JavaScript (będzie można zobaczyć wartości w . style zmiana atrybutu podczas animacji)

+0

To miło, ale chociaż Angular to JavaScript, myślę, że nadal używa CSS do animacji. Nie ma tu eksperta, ale linki, o których wspominałem we wcześniejszym komentarzu, wydają się jasne. – GolezTrol

+0

@GolezTrol, sprawdź aktualizację od 1 min temu do mojej odpowiedzi :) wyjaśnia, jak sprawdzić czy animacja przez angular2 jest oparta na css lub js. – Dekel

2

odpowiedź jest faktycznie w docs:

https://angular.io/guide/animations

system animacji kątowej za pozwala y Tworzymy animacje, które działają z taką samą rodzimą wydajnością, jaką można znaleźć w czystych animacjach CSS. Możesz również ściśle zintegrować logikę animacji z resztą kodu aplikacji , aby ułatwić sterowanie.

Usuwa również konieczność śledzenia długości animacji, aby się rozłożyć i uniknąć przeciążenia przeglądarki lub łączenia animacji.

Ogólnie rzecz biorąc, jeśli masz prostą małą rzecz, CSS jest prawdopodobnie łatwiejszy. Ale jeśli konsekwentnie robisz animacje w swojej aplikacji, otrzymujesz dużą moc z niewielkim spadkiem z Angular Animations.