Приветствую! Вот мы вновь добрались до javascript и тема сегодняшнего изучения интерфейс animate. Поехали!

Уже само название говорит о том что данный интерфейс отвечает за работу с анимацией.

Рассмотрим пример:

<h1>Заголовок первого уровня!</h1>
<script>
   var animationH1 = document.querySelector('h1').animate([
    {transform: "translate(1000px)"},
    {transform: "translate(500px)"},
    {transform: "translate(0px)"}
   ], 500);
  animationH1.play();
</script>

Здесь к заголовку первого уровня был применен эффект анимирования в виде перемещения элемента из одной точки в другую. Вначале мы вызываем у элемента метод animate() в который передается два параметра.

Первый параметр это массив с объектами в которых указываются свойства css по которым будут происходить изменения. Изменения будут происходить последовательно от первого до последнего элемента массива.

Второй параметр это опции управления анимированием, можно указать просто продолжительность анимации в миллисекундах или передать объект с определенными параметрами. В нашем случае передано 500, что означает что анимация будет длиться полсекунды.

И в завершении чтобы анимация запустилась необходимо вызвать метод play().

В объектах мы можем прописывать сколько угодно свойств css.

var animationH1 = document.querySelector('h1').animate([
    {transform: "translate(1000px)", opacity: 0},
     {transform: "translate(500px)"},
      {transform: "translate(0px)", opacity: 1}
   ], 500);
  animationH1.play();

В этом примере было добавлено свойство opacity от 0 до 1. В результате помимо перемещения элемент теперь плавно появляется.

Количество элементов в массиве также может повлиять на эффект анимирования.

var animationH1 = document.querySelector('h1').animate([
    {transform: "translate(1000px)", opacity: 0},
    {transform: "translate(900px)"},
    {transform: "translate(800px)"},
    {transform: "translate(700px)"},
    {transform: "translate(0px)", opacity: 1}
   ], 1000);
  animationH1.play();

К примеру здесь пять элементов, время анимации 1 секунда, то есть на выполнение правил css в каждом объекте отводится по (1000 / 5) 200 миллисекунд. Обратите внимание что величины изменения в свойствах расписаны не равномерно и из за этого у нас создается эффект замедления в самом начале анимации. Это тоже можно использовать с умом!

Теперь перейдем к возможным опциям управления анимацией.

<p>Мигание</p>
<script>
    var animationP = document.querySelector('p').animate([
    {
      opacity: 1
    },
    {
      opacity: 0
    }
    ], {duration: 300, iterations: Infinity});
    animationP.play();
</script>

Здесь был создан эффект мигания. Обратите внимание что анимация при выполнении уже не завершается, а выполняется циклично. За цикличность отвечает свойство iterations. Оно может принимать количество итераций в виде числа или значение Infinity что зацикливает процесс анимации. Свойство duration - отвечает за продолжительность анимации на каждой итерации.

<div style="width:50px; height:50px; border:1px solid black;"></div>
  <script>
  var square = document.querySelector('div').animate([
    {
      transform: "rotate(0deg)"
    },
    {
        transform: "rotate(360deg)"
    }
  ], {duration: 1000, iterations: 3});
</sсript>

В этом примере квадратик совершит три оборота на 360 градусов. Заметьте что я не использовал метод play() для запуска анимации, в некоторых браузерах это будет работать но лучше не забывать про метод play().

Идем дальше! Иногда может возникнуть необходимость в изменении направления анимации.

<h1>Заголовок первого уровня!</h1>
  <script>
    var animationH1 = document.querySelector('h1').animate([
      {transform: "translate(1000px)"},
      {transform: "translate(0px)"}
    ], {duration: 1000, iterations: Infinity, direction: 'alternate'});
    animationH1.play();
  </script>

За это отвечает свойство direction, значение 'alternate' обеспечивает анимацию вперед - назад. Другие значения 'reverse' - противоположное направление анимации, 'alternate-reverse' - направление назад - вперед, 'normal' - значение направления анимации по умолчанию.

Еще важным параметром для управления анимацией является - скорость изменения анимации с течением времени. За это отвечает свойство easing. Изначально, по умолчанию оно имеет значение 'linear', то есть скорость изменения анимации с течением времени является линейным(равномерным). Есть и другие значения 'ease', 'ease-in', 'ease-out', 'ease-in-out' и более сложные 'cubic-bezier(0.42, 0, 0.58, 1)'.

<h1>Заголовок первого уровня!</h1>
  <script>
    var animationH1 = document.querySelector('h1').animate([
      {transform: "translate(1000px)"},
      {transform: "translate(0px)"}
    ], {duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease'});
    animationH1.play();
  </script>

В данном примере элемент уже перемещается не линейно а с эффектом ускорения. Такой эффект был создан благодаря свойству easing со значением 'ease'. Остальные значения я думаю вы можете попробовать самостоятельно.

Вот в принципе и все о чем я хотел вам рассказать про работу с интерфейсом animate. Напоследок скажу что есть еще методы которые помогут более гибко управлять анимацией. Посмотреть их можно здесь Element.animate()

На этом данная статья подошла к концу. Надеюсь она была для вас полезна и вы открыли для себя что то новое! Не забудьте подписаться в группу Вконтакте для получения уведомлений о выходе новых статей и новостей. Еще есть канал на Youtube где можно найти дополнительную информацию.

А с вами был Грибин Андрей, желаю всего хорошего!