Анимация в браузере. Рекомендации

images

Если анимация для современных браузеров не представляет почти никаких проблем, то для мобильных телефонов она может попортить немало нервов. В любом случае при создании анимации полезно придерживаться нескольких простых правил.

Используйте CSS анимацию где это возможно.

Если вам не требуется поддержка анимации старыми браузерами, то лучше использовать CSS animation и transition. При этом браузеры смогут использовать графический процессор, что ускорит производительность.

При необходимости использовать JavaScript пользуйтесь requestAnimationFrame вместо setTimeout и setInterval.

Иногда задачу анимации невозможно либо очень сложно решить с помощью CSS. Примером может быть параллакс эффект. В этом случае на помощь приходит функция requestAnimationFrame. Она позволяет системе отрисовывать следующий кадр только когда система к этому готова.

Старайтесь реализовывать свою анимацию только с помощью position (translate)scalerotation и opacity.

Именно эти 4 свойства современные браузеры позволяют анимировать очень быстро.

[codesyntax lang=»css»]

transform: translate(Npx, Npx); /*position*/
transform: scale(N); /*scale*/
transform: rotate(Ndeg); /*rotation*/
opacity: N;

[/codesyntax]

Почему? Очень подробно описано тут.

Видео с примером использования для анимации position c помощью свойств left и top, а также с помощью translate:

http://youtu.be/-62uPWUxgcg&w=640&h=385

Пользуйтесь Chrome DevTools Timeline для обнаружения тонких мест в вашей анимации

Подробнее о пользовании Timeline можно узнать тут.

Запись опубликована в рубрике HTML/CSS, JavaScript/JQuery с метками , , . Добавьте в закладки постоянную ссылку.

Один комментарий: Анимация в браузере. Рекомендации

  1. лучше translate3d, я лично не заметил разницы между translete(2d) и top left когда приходиться перемещать например фоны на весь экран. Но тут могут возникнуть проблемы с opacity, если слои пересекаются, на больших разрешениях экрана.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *