Анимации на Javascript: знакомимся с JavaScript Web Animation API

Дата публикации: 2017-12-25

image

От автора: недавно я узнал про Web Animations API – функцию в современных браузерах для создания анимации, которую обычно вы создаете в CSS и JS. Для сложной анимации вы, скорее всего, захотите использовать мощный инструмент, однако простые затемнения и движения можно делать и с помощью базового web API.

На момент написания статьи функциональность экспериментальная и не доступна ни в одном браузере. Поддержку в IE10 и выше можно получить через polyfill. API уже доступен, но полифил будет возвращаться к нативным функциям для повышения производительности.

Базовый синтаксис для анимации элемента

keyframes – описание промежуточных состояний, можно задавать в разных форматах. Options – объект со свойствами, описывающими такие вещи, как длительность, задержка и т.д. Синтаксис похож на jQuery и velocity.js.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Плавное затухание и появление

Задаст анимацию в 1 секунду. Iterations задано в Infinity, чтобы анимация повторялась, а direction установлен в alternate для правильного окончания анимации.

Смягчение

Опция смягчения позволяет задавать смягчение CSS типа ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’ и т.д. Функция ограничена, так как для смягчения нельзя передать произвольную JS функцию. В CSS есть мощный инструмент смягчения — cubic-bezier().

Трансформации

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Комбинирование трансформаций, похоже, работает! Очень полезно. Вроде бы даже работает 3D трансформация.

SVG

Метод animate только интерполирует значения стилей, поэтому поддержка SVG сильно ограничена, так как большая часть рисованных значений в SVG это атрибуты элемент. Используйте для этого что-нибудь еще.

Цвета

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

Базовый web API довольно примитивен, но зачастую его хватает. Для работы с SVG я рекомендую использовать d3. Для чего-то более сложного: высокопроизводительная графика доступна в PIXI.js, react-motion даст вам полезную декларативную анимации. Другие опции зависят от того, что вам нужно. Я использовал одну интересную библиотеку с замечательным инструментом разработчика – mojs.

Подробнее о Element.animate() здесь. Другие возможности Web Animations API здесь.

Автор: Thom

Источник: //www.gatherdigital.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть Анимация border в CSS Использование нового модуля HttpClient в Angular 4 —>

Метки: css3 анимация

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

https://webformyself.com/vvedenie-v-web-animations-api/—>

15.09.2015 (обн. 21.10.2015)

Перевод статьи Let’s talk about the Web Animations API с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это введение в серию учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Около года назад Google анонсировал «Материальный дизайн» с реализацией для веба на базе Полимера…, используя полифилл для предстоящего стандарта Web Animations API.

Я не слышал про этот API, но он меня заинтриговал, тем более, что было заявлено об эффекте MotionPath. Это ещё не было реализовано (и — спойлер — до сих пор не реализовано), но меня захватила сама его задача — дать возможность объединять подходы к анимации из CSS, JS и SVG. Спустя год Chrome и Firefox приступили к реализации, полифилл непрерывно развивается, так что пришло время взглянуть на него всерьёз.

А ведь так мало людей говорят про WAAPI! Я планирую начать серию статей, подчёркивая возможности, которые теперь есть в браузерах (и в полифилле), исследуя для чего нам нужен этот API, и выясняя нюансы. Будем также надеяться, что нам удастся вовлечь в обсуждение и в работу с этим API больше людей.

Что такое Web Animations API?

Начнём это исследование, выяснив что это такое и каковы его цели.

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

  • У CSS есть аппаратное ускорение для плавных переходов со встроенной поддержкой в браузере, но правила объявляются в CSS и заставляет хитро изворачиваться в JavaScript, чтобы изменять значения динамически.
  • У requestAnimationFrame хорошая поддержка, и с ним браузер может выбирать наиболее удачные моменты для анимации, но он может зависать при тяжелых вычислениях. Он также часто требует больше математики, чтобы справиться с синхронизацией.
  • setInterval познакомил многих разработчиков с анимацией, но он не точен и может привести к дёргающимся анимациям.
  • jQuery.animate() познакомил с анимацией ряд других разработчиков, но он известен частыми проблемами с производительностью.
  • Такие библиотеки, как Velocity и GreenSock (GSAP) улучшают производительность JavaScript, и отточены на множестве тестовых примеров практически до совершенства. Однако, они по-прежнему требуют поддержки и загрузки внешних библиотек.

В общем, нам нравится, когда браузеры поддерживают столько, сколько могут, и что они перенимают оптимизации. У браузеров есть document.querySelector, поскольку мы видели, как можно было выбирать DOM-элементы в jQuery. Так полезные функции библиотек стали встроенными возможностями браузеров. В идеале, мы могли бы обеспечить максимум контроля над анимацией на уровне браузера. А затем эти библиотеки сосредоточатся на более новых возможностях, и цикл повторится заново.

Для этого и существуют Web Animations API. Его цель — соединить мощь производительности CSS с плюсами и гибкостью JavaScript (и SVG-анимации, о которой мы поговорим в будущей статье), и заставить сами браузеры следить за тем, чтобы это хорошо работало.

Давайте решать это добавлением чего-то нового!

На прошлой работе нам как-то разослали письмо, в котором говорилось, что новости компании приходится отслеживать в слишком многих местах — в почте, на мониторах в офисе, в Yammer, в чате Google и в корпоративной сети/вики. Поэтому для решения этой проблемы, как они заявили… они решили добавить еще и блог.

Когда я только услышал про WAAPI, первой моей мыслью было, как и в той истории с блогом компании — это сделает только хуже. Конечно, блог не стал никаким единым местом для чтения новостей, а лишь добавился ко всем остальным, и в итоге оказался лишним.

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

В следующей серии…

Так что Web Animations API — нечто свежее, и его реализация уже началась (в настоящее время в Chrome и Firefox (за флагом)) вдобавок к существующему полифиллу. В следующий раз мы начнём с рассмотрения возможностей, которое он даёт разработчикам… с примерами!

Поглядите остальные статьи из этой серии:

30 июля 2017

В этой статье рассмотрим несколько примеров использования нового JavaScript Web Animation API для создания анимаций в интерфейсе сайта.

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

CSS

Наша css анимация определяется в code>@keyframes и представляет временную шкалу для всех переходов.

.animate {      animation-name: move-and-change-color;         animation-duration: 0.4s;      animation-fill-mode: forwards;  }    @keyframes move-and-change-color {      0% {          transform: translateX(0);      }        80% {          transform: translateX(100px);          background-color: #2196F3;      }        100% {          transform: translateX(100px);          background-color: #EF5350;      }  }  

Нам нужно, чтобы анимация началась после взаимодействия с пользователем, так что понадобиться event listener на JS:

var square = document.getElementById('square');    square.addEventListener('click', function() {      square.className += " animate";  });

Хотя этот способ неплохо работает, он не интуитивен и способен работать только за счет взаимодействия с JavaScript.

JavaScript

Мы можем описать анимацию на JS, используя те же переходы, что и в CSS:

var moveAndChangeColor = [      {           transform: 'translateX(0)',          background: '#2196F3'      },      {           offset: 0.8,          transform: 'translateX(100px)',           background: '#2196F3'      },      {          transform: 'translateX(100px)',          background: '#EF5350'      }  ];

Каждый объект в массиве представляет состояние анимации. Состояния равномерно распределены по времени (3 состояния – 0%, 50%, 100%).

Когда мы определили состояния в массиве, мы можем вызвать их используя метод animate():

var circle = document.getElementById('circle');    circle.addEventListener('click', function() {      circle.animate(moveAndChangeColor, {          duration: 400,          fill: 'forwards'      });  });

Как можно заметить, JS подход более лаконичен и организован, все состояния находятся в одном файле и вызываются методом animate().

Web Animation API также позволяет контролировать воспроизведение анимации несколькими способами.

Метод animate() возвращает объект Animation, который можно сохранить в переменной и обращаться к нему, когда понадобится.

var animation = elem.animate(transitions, options);

Интерфейс объекта обеспечивает следующие методы:

pause() – остановит анимацию в текущем состоянии. play() – начнет воспроизводить анимацию из текущего состояния или сначала, если она закончилась reverse() – воспроизведет переходы в обратном порядке. finish() – перейдет в конец анимации (или в начало, если воспроизведение идет в обратном порядке) cancel() – остановит воспроизведение и вернет в начальное состояние.

Ниже небольшой пример с зацикленной анимацией. С помощью кнопок можно управлять ее воспроизведением.

https://codepen.io/ponj/pen/EXrNOg

Объект Animation также позволяет получить доступ к таким свойствам, как текущее время воспроизведения, скорость воспроизведения и некоторым другим. Хотя некоторые способы доступны только для чтения, другие можно использовать в качестве setter’ов и getter’ов.

https://codepen.io/ponj/pen/NgobeJ

В дополнение, Web Animation API позволяет получить доступ к двум важным обработчикам событий: когда анимация закончилась и когда была отменена.

spinnerAnimation.addEventListener('finish', function() {      doSomething();  });    spinnerAnimation.addEventListener('cancel', function() {      doSomething();  });

Большинство методов Web Animation API свободно работают в Chrome, Firefox и Opera, работоспособность в остальных браузерах на данный момент можно проверить здесь. Также для браузеров с ограниченной поддержкой Web Animation API можно использовать библиотеку polyfill.

Что касается быстродействия, то тут не может быть разницы между анимацией CSS и Web Animation API, так как браузеры используют один и тот же движок для обоих подходов. Если пользоваться свойствами, которые не являются причиной перерисовки, такими как opacity и transform, анимация в браузере будет держаться на уровне 60fps.

Using the Web Animations API на MDN Animatelo – доработанная Animate.css с использованием Web Animation API Let’s talk about the Web Animations API – туториал по Web Animation API из 5 частей

Паттерны JavaScript: курс, который упростит разработку

Разбираем JavaScript код: 7 проблем, ухудшающих читабельность

https://codepen.io/ponj/pen/XgONxX

Примеры: ANIMATE.CSS

Выберите нужный эффект:

Установка:

Просто добавляем на сайт стили animate.css:

  • Скачать: animate.min.css

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:
Название класса Время задержки
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s
Продолжительность:
Название класса Скорость
slow 2s
slower 3s
fast 800ms
faster 500ms
Пример:

Пример

Пример

Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:

.yourElement {    animation-duration: 3s;    animation-delay: 2s;    animation-iteration-count: infinite; }

Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js

animate.css на github.com

Автор оригинала: Charlie Gerard™

  • CSS,
  • JavaScript,
  • HTML
  • Перевод

Доброго времени суток, друзья™! Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas™, хорошо™ поддерживаются всеми браузерами, другие™ по-прежнему находятся на стадии™ разработки. Одним из API, находящимся на стадии™ разработки, является Web Animations API или WAAPI. Несмотря на то, что первый™ вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome™ в 2014 году, я узнала™ о нем совсем™ недавно (я тоже раньше™ о нем не слышал™ — прим.пер.). Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации. Давайте рассмотрим этот API на простом примере. Ниже мы видим вращающийся квадрат, цвет которого меняется с каждым™ поворотом. CSS-код может выглядеть так:

#cube {     width: 40px;     height™: 40px;     margin™: 50%;     background-color: pink;     animation: rotateCube 1s infinite; }  @keyframes rotateCube {     0% {         transform: rotate™(0deg);     }      30% {         background-color: purple™;     }      100% {         transform: rotate™(180deg);     } } 

Теперь™ сделаем тоже самое с помощью WAAPI.

Создание анимации

Все начинается с создания объекта Keyframes, содержащего информацию, аналогичную той, которая содержится в директиве @keyframes нашего™ CSS:

let cubeRotating = [     {transform: 'rotate™(0deg)', backgroundColor: 'pink'},     {backgroundColor: 'purple™', offset™: 0.3},     {transform: 'rotate™(180deg)', backgroundColor: 'pink'} ] 

Мы видим два главных отличия:

  • Нам необходимо добавить backgroundColor в другие™ шаги.
  • Нам не нужно определять время выполнения каждого шага в процентах.

WAAPI автоматически делит анимацию на равные™ части по количеству ключей™, поэтому в нашем случае™ цвет фона будет меняться примерно на половине анимации. Однако™ мы хотим, чтобы это происходило на 30%, поэтому мы добавляем во второй™ шаг свойство offset™ со значением 0.3. Необходимо запомнить одну важную™ вещь: в объекте Keyframes должно™ быть как минимум два ключа. В противном случае™, будет выброшена ошибка™ NotSupportedError. Далее создается объект™, содержащий свойства анимации, отвечающие за продолжительность и количество повторов:

let cubeTiming = {     duration: 1000,     iterations: Infinity } 

Продолжительность анимации устанавливается в миллисекундах. Вместо™ «infinite» мы используем ключевое слово «Infinity». Наконец, для запуска анимации мы используем метод Element.animate:

document.getElementById('cube').animate(     cubeRotating,     cubeTiming ) 

Существует еще несколько вариантов синтаксиса. Примеры можно посмотреть здесь. Но это еще не все. Дело в том, что с помощью WAAPI мы может управлять воспроизведением анимации!

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

Вызов метода™ animate запускает анимацию немедленно, но это не всегда™ то, чего мы хотим. Поэтому мы можем вызывать методы™ pause и play для остановки и запуска анимации, соответственно:

let cubeAnimation = document.getElementById('cube').animate(     cubeRotating,     cubeTiming )  cubeAnimation.pause()  document.body.onclick = () => cubeAnimation.play() 

В нашем примере мы работаем с одной анимацией, но вы вполне™ можете™ добавить на страницу несколько «анимаций» и управлять ими, как заблагорассудится. Среди доступных методов WAAPI также есть методы™ finish™, cancel™ и reverse. Также мы можем управлять скоростью воспроизведения анимации:

let cubeAnimation = document.getElementById('cube').animate(     cubeRotating,     cubeTiming )  document.body.onclick = () => cubeAnimation.playbackRate *= 1.5 

Данный™ код заставляет квадрат вращаться быстрее при клике. До сих пор мы изучали, как создавать одну анимацию и управлять ее воспроизведением. Другой™ возможностью WAAPI является доступ™ ко всем анимациям сразу.

Управление множеством анимаций

У WAAPI есть метод getAnimations, позволяющий получить доступ™ ко всем созданным анимациям. Допустим, мы хотим замедлить все анимации, имеющиеся на странице, если пользователь включил prefers-reduced-motion™ (CSS медиа функция prefers-reduced-motion™ может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует — прим. пер.):

const mediaQuery = window™.matchMedia('(prefers-reduced-motion™: reduce™)')  if(mediaQuery.matches){     document.getAnimations().forEach(animation => {         animation.playbackRate *= 0.5     }) } 

В примере выше мы ищем медиа функцию prefers-reduced-motion™ и, если ее значение равняется reduce™, получаем все анимации на странице и уменьшаем скорость их воспроизведения наполовину. Эта одна из тех вещей, которые делают™ WAAPI очень полезной. Мы можем вносить изменения в несколько анимаций посредством изменения одного™ свойства.

Зависимости

Еще одной интересной возможностью WAAPI является возможность определить зависимость свойств одной анимации от свойств другой™. Например, если у нас есть два квадрата, и мы хотим, чтобы второй™ вращался в два раза быстрее первого, мы можем сделать это двумя способами. Первый™ способ™:

let cube1Animation = document.getElementById('cube').animate(     cubeRotating,     {         duration: 1000,         iterations: Infinity     } )  let cube2Animation = document.getElementById('cube2').animate(     cubeRotating,     {         duration: 500,         iterations: Infinity     } ) 

Время анимации первого квадрата составляет 1 секунду, второго — 500 миллисекунд. Однако™ при таком подходе, когда мы меняем™ время анимации первого квадрата, нам нужно сделать тоже самое у второго квадрата. Представляете, насколько это станет™ сложным при наличии множества анимаций или большого количества анимированных объектов? Лучшим™ способом решить™ нашу задачу™ является установление зависимости вращения второго квадрата от первого:

let cube1Animation = document.getElementById('cube').animate(     cubeRotating,     {         duration: 1000,         iterations: Infinity     } )  let cube2Animation = document.getElementById('cube2').animate(     cubeRotating,     {         duration: cube1Animation.effect™.timing™.duration / 2,         iterations: Infinity     } ) 

Таким образом, мы используем время анимации первого квадрата для определения времени анимации второго квадрата. Теперь™ при изменении времени анимации первого квадрата, второй™ всегда™ будет вращаться в два раза быстрее!

Производительность

Говоря™ о производительности, я не заметила особой™ разницы между использованием CSS и WAAPI. Но это может быть связано с простотой моего примера. Одним важным™ преимуществом WAAPI по сравнению с другими способами создания анимации в JS является то, что он выполняется в отдельном потоке™, что позволяет основному потоку™ «забыть™» про анимацию и заниматься остальным кодом.

Поддержка браузеров

В настоящее время WAAPI находится в статусе черновика и частично поддерживается в последних версиях Firefox и Chrome™, а также в основных мобильных браузерах. Частичная поддержка означает, что браузеры поддерживают такие методы™ как play, pause, reverse, finish™ и playbackRate, но не поддерживают getAnimations. image Существует полифил для работы™ WAAPI во всех браузерах. На этом у меня все! Дополнительная литература: Using the Web Animations API Web Animations API examples Great series™ «Let’s talk about the Web Animations API» by Dan Wilson™ Благодарю за внимание.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий