Web Animations API

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

Оглавление:
  1. Императивные и декларативные анимации
  2. Императивные анимации
  3. Декларативные анимации
  4. Элемент анимации для браузера
  5. Воспроизведение анимации
  6. Применить анимации
  7. Поддержка

Сейчас для современных браузеров появляются дополнительные средства, которые по идее должны сделать анимации 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%)';
// подождать кадры 
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);
// передумал через 1500 мс
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('гравицапа ку');
}
к меню ↑

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

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

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

к меню ↑

Поддержка