CSS, Javascript анимация в браузерах на HTML странице

Подробности: Категория: Для сайта; Опубликовано 26.08.2014 18:20

animation-html

Этот материал посвящён анимации на HTML страницах, о производительности анимации, перспективности использования, а так же анимации в HTML5 мобильных приложениях и играх.

Javascript анимация

Первым делом начнём с рассмотрения JS анимации на HTML странице. Анимация на яваскрипте может проводиться либо с setInterval, с помощью которой можно задать статично кадры в секунду, либо с помощью обычной функции которая в конце вызывает саму себя ну или с window.requestAnimationFrame.

Вот простейшая логика работы анимации в JS:

var el=document.getElementById('elem');
mar=10; //статичные начальные данные
//цикл начинается
mar=mar+1;
el.style.marginLeft=mar+"px";
//цикл заканчивается

Прелесть JS в том что можно удобным способом расширить нативный инструментарий и использовать например анимацию на jQuery или использовать Velocity. Это существенно ускоряет производительность. Однако в частности Velocity использует JS не совсем для анимации, так ака само анимирование производиться там в CSS о котором речь пойдёт ниже.

SVG анимация

Нельзя не упомянуть о SVG анимации. Сама она очень хороша, но в мобильных браузерах она не работает. Вернее работает только SMIL на Андроид 3.0-выше. Как бы неприятно было это говорить сам SVG работает в методе WebView, но всё что связано с анимацией в этом тэге увы...

Везде где она работает - она показывает хорошую производительность. Убедитесь сами.

Отличительной особенностью является то что внутри SVG нет пикселей, а есть некие абстрактные величины. После того как вы укажите высоту и ширину svg элемента, вы можете указать аттрибут viewbox, с помощью которого вы можете настроить положение внутренних элементов и их относительную величину. SVG можно сделать любой длинны и ширины и он подстроит внутренние объекты под с вой размер с viewbox.

Canvas анимация

Этот вид анимации очень распространён в браузерах обычных компьютеров в частности при создании игр. Минусами являются:

1. Отсутствие идентификации DOM у элементов.

2. Чем выше разрешение-тем меньще производительность.

В мобильных браузерах canvas анимация работает негладко.

CSS Анимация

Давайте рассмотрим анимацию с помощью CSS3. Как известно в CSS3 к нам пришло удивительное свойство animation с помощью которого можно полноценно делать анимацию тех или иных объектов.

Как это происходит? Например мы хотим передвинуть элемент #obj в право на 300 пикселей и вернуть обратно, при чём зациклив анимацию до бесконечности. С CSS3 это стало очень легко исполнимой операцией.

Объекту присваеваем помимо стандартных ширины и высоты, свойства:

-webkit-animation: 3s moving linear infinite;
animation: 3s moving linear infinite;

Для большей кроссбраузерности мы задали объекту два свойства, в которых 3s - з секунды на выполнение всей анимации, moving - название анимации, которая применяется к объекту(Ниже-подробнее), linear - флаг, который заставляет двигаться объект с одинаковой скоростью на всех участках, infinite - флаг делающий анимацию бесконечной.

Что ж, теперь коснёмся самой анимации moving. Её нужно будет прописать в том же CSS файле где вы её применяете. Раньше да и сейчас некоторые используют для передвижения объекта по экрану параметры left/right/top/bottom или margin. На самом деле это весьма плохая практика и делать так не стоит, так как это несколько неоптимизированный способ - можно обеспечить более плавное движение другими CSS3 свойствами Этими свойствами являются translatex и translatey.

/*Плохая анимация*/
@-webkit-keyframes moving {
from {margin-left: 0;}
50% {margin-left: 300px;}
to {margin-left: 0;}
}

/*Хорошая анимация*/
@-webkit-keyframes moving {
from {transform: translatex(0);}
50% {transform: translatex(300px);}
to {transform: translatex(0);}
}

Так же следует отметить что transition в таких событиях как hover ведёт себя также очень достойно и на мобильных устройствах. Ну а вообще тот же самый transition или CSS3 animation вы можете повесить на любой элемент с помощью JS. В таком случае вы получите лучший вариант (JS указывает что анимировать, CSS анимирует).

Раз такое дело, то при создании игр обычно используют фреймворки и пр интсрументарий облегчающий разработку. Одним и таких является Sencha Animator, позволяющий на CSS делать разные штуки и имеющий удобный интерфейс.

Что лучше и быстрее CSS анимация или JS анимация?

Для начала можно немного углубиться в вычислительную часть чтобы немного прояснить ситуацию. Javascript является интерпретированным языком и чтобы его выполнять JS движку браузера прихродиться постоянно парсить инструкцию (код) во время выполнения и далее конвертировать её в уже понятный для машины код. С CSS несколько другая ситуация. Дело в том что он сразу компилируется в машинный язык и тем самым показывает лучшую производительность в анимации.

CSS анимация дефолтно на порядок производительнее Javascript'овой, однако существуют некоторые ньюансы когда использование JS даёт болльшее преимущество в производительности.

Как было сказано в последних предложениях о CSS анимации - лучше использовать CSS для обработки анимации, а JS для того чтобы указывать что обрабатывать (просто повесив например на элемент class с нужными прописанными анимациями).

Это был вопрос производительности, следующий вопрос - уместность. Несмотря на все казалось бы выигрышные стороны CSS, возникают ситуации что лучше использовать JS. Такое бывает.

Оптимизация производительности анимации

Если вы делаете HTML 5 приложение на Android, можно попробовать сделать следующее:

В параметры вашего активити допишите android:hardwareAccelerated="true"

Это даст акселерацию на железе, GPU при включённой опции усиленно ворвётся в работу и наряду с CPU будут полностью заняты обработкой вашего приложения. Из минусов только то, что батарейка кушаться будет слегка повеселее.

Так же не используйте событие onclick (хоть оно и работает на тачскрине). Дело в том что это событие делает задержку примерно в треть секунды и чтобы этого не было лучше используйте ontouchstart и ontouchend.

Обязательно дополняйте и пишите в комментарии то чего в статье не было упомянуто. Вместе мы сделаем качественный материал на русском.

You have no rights to post comments

Искать

Последнее добавленное