Элемент Web Animations element.animate()

Анимации в веб-браузер выводятся сложным и длинным кодом JavaScript. С появлением мобильного мира анимация появилась в CSS3 с аппаратным ускорением GPU . Теперь цель веб-разработчиков сделать для мобильного браузера анимации 60 кадров, но, при этом нужно учитывать придел возможностей браузера.

Сейчас для современных браузеров появляются дополнительные средства, которые по идее должны сделать анимации JavaScript более эффективными, но толку от этого мало. Настоящий инновационный прорыв в этом направлении это объединить CSS (декларативный) и JavaScript (императив) анимации.

Императивные и декларативные анимации

Веб-разработчикам часто приходится сталкиваются с решением, какой выбрать способ анимации, с помощью JavaScript (императив) или CSS (декларативный). В каждом способе есть и плюсы, и минусы:

Императивные анимации

Императивная анимация работает в браузере основным потоком. Не редкость когда основной поток уже занят другими JavaScript. Это вызывает конфликты потоков, в результате, отсутствие кадров анимации, что не есть хорошо.

Плюс в анимации с помощью JavaScript — это управление и контроль: воспроизведение, пауза, назад, приостановка и отмена являются тривиальными. Некоторые эффекты прокрутки, такие как параллакс могут быть эффективными только с помощью JavaScript.

Декларативные анимации

Для анимации переходов лучше подходит CSS. Основным преимуществом этого способа является то, что браузер может оптимизировать анимации. Он может создавать слои, в случае необходимости и выполнить некоторые операции вне главного потока.

Минус в том что во многих случаях анимации CSS не имеют выразительную силу анимации JavaScript.

Элемент анимации для браузера

Веб-анимация в виде функции element.animate() впервые появилась в браузере Chrome 36. Функция позволяет создавать анимации исключительно на JavaScript, преимущество этой функции в том что; реализовать её так же просто как и анимацию CSS.

Если Вы когда-нибудь писали CSS анимации , синтаксис функции  Web Animations для вас будет простой, и её части должны быть вам знакомы:



element.animate([
  {cssProperty: value0},
  {cssProperty: value1},
  {cssProperty: value2},
  //...
], {   duration: timeInMs,   iterations: iterationCount,   delay: delayValue });


Но самое большое преимущество в этой функции, это плавность переходов анимации, и не требует  jank для лучшей производительности рендеринга .

Например, как сделать непрерывно падающий снег? Конечно это нужно делать с помощью CSS.

Но, что если снежинки сделать по горизонтали, и окно браузера пользователя не будет известно. Это означает сотни снежинок и сотни новых правил моделирования, в этом случае целесообразно применить JavaScript.

Следующий подход, должен быть вам знаком:



snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame snowFlake.offsetWidth; snowFlake.style.transitionProperty = 'transform'; snowFlake.style.transitionDuration = '1500ms'; snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';


Для того чтобы браузер начал переход из одного элемента к другому, ему нужно указать, что другой элемент готов к этому. Есть несколько способов сделать это. Один из наиболее распространенных способов, это чтение браузером свойств каждого элемента, что заставляет браузер вычислять сразу весь макет, тем самым гарантируя, что браузер заранее знает, что элемент готов для перехода. Использование такого метода позволяет Вам узнать предел возможностей браузера.

В отличие от этого вызов `element.animate()` не мог быть более ясным, говоря именно о том, для чего он предназначен:



snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);


Есть еще варианты. Как и в случае с анимации CSS, можно сделать повтор:



snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], { duration: 1500, iterations: 10, delay: 300
});


Воспроизведение анимации

На самом деле функция element.animate() возвращает объект player , который станнит очень важным с появлением всё больше веб-анимации в интернете. Анимации JavaScript и CSS будут связаны с AnimationPlayers , что позволит объединить их в полезные и интересные способы.

В настоящее время, в AnimationPlayer есть только две очень полезные функциональные части.

Для отмены анимации можно применить player.cancel() :



var player = snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
// less than 1500ms later...changed my mind player.cancel();


Как и в анимации CSS, по окончании всегда срабатывает событие:



var player = snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500); player.onfinish = function(e) { console.log('per aspera ad terra!');
}


Применить анимации

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

Демонстрацию эффекта падающего снега, Вы можете посмотреть как с использованием lement.animate() так с версией polyfill .

Заключение

Спецификация  Web Animations частично заменит длинные коды JavaScript. Функция element.animate() должна существовать как стандарт веб-анимации для всех современных браузеров, а Вы как думаете?

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>