- PVSM.RU - https://www.pvsm.ru -
Анимация в вебе была одна из областей JavaScript, но сейчас, когда мир пересел на мобильные устройства, анимация переместилась на CSS. Это позволило нам использовать декларативный синтаксис при описании анимации, а браузеру производить оптимизацию. В погоне за 60fps (60 кадров в секунду) на ваших мобильных устройствах, вам будет полезно знать все тонкости и нововведения, касающиеся механизмов эффективного отображения анимации в ваших браузерах.
Сейчас на рынке появляется большое количество JavaScript-ориентированных инструментов, предоставляющих более эффективные механизмы для создания анимации, но святой грааль — это симбиоз декларативного и императивного подхода [1], когда основанием для принятия решения является чистый код.
Веб анимации призваны ответить на этот зов, и первая их часть уже была включена в релиз Chrome 36 в виде element.animate()
. Эта новая функциональность позволяет вам создавать анимации на чистом JavaScript и при этом получать производительность, как при использовании CSS анимации или переходов (на самом деле уже с 34-й версии Chrome все описанные выше методы запускаются через движок веб анимаций [2]).
Синтаксис весьма простой, и, скорее всего, он покажется вам знакомым, если вы когда-либо писали CSS переходы (transitions) или анимацию:
element.animate([
{cssProperty: value0},
{cssProperty: value1},
{cssProperty: value2},
//...
], {
duration: timeInMs,
iterations: iterationCount,
delay: delayValue
});
Фишка в комментарии «ожидание кадра». Для того, чтобы обеспечить успешное начало перемещения, браузер должен знать, что элемент находится в стартовой позиции, и есть несколько способов в этом убедиться. Один из самый часто используемых — прочитать одно из свойств объекта, тем самым вызвав пересчет разметки страницы, тем самым подтверждая, что элемент имеет стартовую позицию перед началом перемещения к конечной. Использование этого метода позволяет вам еще раз порадоваться за то, что вы знаете основы работы механизма рендеринга в браузере.
Синтаксис, как мы видим, настолько прозрачен, что больше и не придумаешь:
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() возвращает объект AnimationPlayer, важность которого растет пропорционально количеству запущенных анимаций на странице. И JavaScript, и CSS анимации будут ассоциированы с AnimationPlayer'ами, позволяя им объединяться разными полезными и интересными способами.
Сейчас, AnimationPlayer имеет две функциональности, и обе очень полезные. Вы можете отменить анимацию в любой момент времени используя AnimationPlayer.cancel()
:
var player = snowFlake.animate([
{transform: 'translate(' + snowLeft + 'px, -100%)'},
{transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
// Но вдруг, раньше, чем через 1.5 секунды, я передумал.
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!');
}
Вся эта функциональность находится под капотом Chrome 36, релиз которого уже произошел на днях! Если вы хотите попробовать, сделайте это на нативной реализации в Chrome 36. Как бы то нибыло, существует полифил [3], который добавляет данную функциональность во все новейшие браузеры.
Демо снежинок можно посмотреть в двух исполнениях: на нативной реализации [4] и на реализации с помощью полифила [5].
Ну что же, это небольшое превью того, что скоро будет повседневностью веб-разработки, и оно было выпущено лишь с одной целью: получить фидбэк от разработчиков. Мы не уверены, что учли все пожелания или сгладили все острые края при работе с API анимации. Мы видим только один способ сделать это правильно: дать разработчикам попробовать и посмотреть, что они скажут.
Спасибо Эдди Османи и Максу Хейнрицу за их помощь в написании этого поста
Автор: xamd
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/62277
Ссылки в тексте:
[1] декларативного и императивного подхода: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-imperative-declarative
[2] все описанные выше методы запускаются через движок веб анимаций: http://updates.html5rocks.com/2013/12/New-Web-Animations-engine-in-Blink-drives-CSS-Animations-Transitions
[3] полифил: https://github.com/web-animations/web-animations-js
[4] нативной реализации: http://jsbin.com/novuf/1/watch?js,output
[5] реализации с помощью полифила: http://jsbin.com/rewev/2/watch?html,js,output
[6] Источник: http://habrahabr.ru/post/226169/
Нажмите здесь для печати.