Чем css анимации лучше?

[amelice]

Народ, объясните пожалуйста чем css-анимации лучше ЖС-анимации?
Можете кинуть меня правильными линками, можете объяснить на уровне железки, вобщем хочу понять правильно.
Ну а то что "Это ж CSS, это ж круто! И на мобильниках не тормозит " сама знаю. )))

Edited May 31, 2014 by amelice

[Struggle]

Ну объяснить не объясню, но полагаю что раз показали нам "новую" технологию то ею нужно пользоваться, мобильные и прочие такие мелкие браузеры не достаточно сильны чтобы нормально обрабатывать скрипты, юзаем css3 поэтому

[afdw]

Проще создание

[npofopr]

Вот вроде в прошлом году на конференции 404fest

 

Было выступление на эту тему, но никак видео не могу найти ( 

Edited May 31, 2014 by npofopr

[Yazon_Nile]

js анимация - это по сути не анимация. Это изменение style элемента через различные промежутки времени.

css анимация - это уже анимация в большем смысле. Огромным плюсом является то, что css анимация использует графический укоритель, и соотв почти не грузит процессор.

 

Для большинства смартов css анимация визуально НАМНОГО плавнее js-анимации.

[swandev]

Почитайте здесь http://davidwalsh.name/css-js-animation

 

там кстати говорится об замечательном плагине velocity.js

посмотреть как он себя ведет в сравнение с jquery и css анимацией можно тут http://julian.com/research/velocity/

[SelenIT]

Еще в свое время была занятная пара статей: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ и http://christianheilmann.com/2014/01/13/myth-busting-mythbusted/. Во второй, кстати, неплохой ответ на вопрос топика.

[amelice]

что css анимация использует графический укоритель, и соотв почти не грузит процессор.

Имеется в виду напрямую работает с видеокартой?

Спасибо вам за ссылки! Почитаю на досуге.

[Игорь Ермаков]

Огромным плюсом является то, что css анимация использует графический укоритель, и соотв почти не грузит процессор.

Каким боком она его использует-то? Я в своё время так и не догнал, а никто объяснить не может. Чисто по моим экспериментам при выполнении стандартной css анимации GPU вообще не чешется, а CPU нагружается, может я что-то не так делаю? 

[Zverushka]

@Игорь Ермаков, даже если и на cpu идет нагрузка, на уровне движка должна быть оптимизирована прорисовка и перерисовка анимируемых объектов.

Тут можно вспомнить аддоны к играм - которые отжирают намного больше ресурсов компьютера, чем если бы их сделали не на lua, а написали бы непосредственно на движке игры.

[Игорь Ермаков]

@Игорь Ермаков, даже если и на cpu идет нагрузка, на уровне движка должна быть оптимизирована прорисовка и перерисовка анимируемых объектов.

А она оптимизирована? 

[Николя223]

А она оптимизирована?  

как ты считаешь что быстрее js или язык на котором браузер написан, например C

Когда ты играешь в игрушки - там до черта эффектов и все плавные, так? Почему.... Во первых скорость обработки языка. Во вторых различные шейдеры директ иксы . Всё это ускоряет работу на уровне не программном а аппаратном. Другими словами Ты не стал верстать макет, а вместо тебя верстает верстальщик Володя.... И у тебя руки свободные и макет будет готов.

Вот и сравнить все эти игрухи и то что происходит в браузерах - примитивно. Именно поэтому идет тенденция на ускорение обработки.

То что с js анимацией - тормоза и процессор тратит время на обработку, то для родного языка браузера - это пустяки. Он ведь рендерит страницу с бешеной скоростью и ничё. Вот и анимация для него также пустяки. 

Css анимация - это рациональный подход, Пусть анимацией занимается не тормознутый js, а тот кто быстрее 

Наверно скоро и рендеринг канвы на C переложат. Ибо не фиг рендерить канвас, когда страница и так рендерится

Edited June 14, 2014 by Николя223

[SelenIT]

Судя по этой статье (и эта, кажись, подтверждает), участие GPU в процессе зависит не от способа анимации, а от анимируемого свойства (для трансформаций, как минимум 3D, прозрачности и еще пары подобных украшалок включается, для всяких left/right, width/height и т.п. — нет). Есть небольшая разница за счет того, что JS-анимации идут в основном потоке, а CSS — как бы в отдельном, но именно небольшая, т.к. основную нагрузку дает сама перерисовка, которая никуда не девается. CSS-анимации проще в создании и поддержке, JS-анимации дают немного больше контроля и гибкости, так что, как всегда, нужно выбирать инструмент по задаче