Anime.js - очень легкий движок анимации JavaScript, уменьшенный до 14 КБ и сжатый только 6 КБ. Он поддерживает все современные браузеры и может практически анимировать что угодно, от свойств CSS до произвольных значений JavaScript. В этой статье мы познакомимся с основами Anime.js и узнаем, как создать следующую анимацию:

Основы аниме

Anime предоставляет очень простой API для анимации элементов. Вы начинаете с создания объекта Anime и передачи ему простого объекта JavaScript, описывающего вашу анимацию:

const animeObject = anime({
  /* describe animation */
});

Ниже приводится анатомия объекта анимации:

{
  /* Animation Targets: div, .box, #sky, etc... */
/* Animatable Properties: height, opacity, color, translateX, etc ... */
/* Property Parameters: duration, delay, easing, etc... */
/* Animation Properties: loop, direction, autoplay, etc... */
}
  • Цели анимации: div, .box, #sky,…
  • Анимируемые свойства: height, opacity, scale,…
  • Параметры свойства: duration, delay, easing,…
  • Свойства анимации: loop, direction, autoplay

Например, следующий фрагмент кода - это все, что вам нужно для анимации div с идентификатором box, 200 пикселей по экрану:

anime({
  targets: '#box',
  translateX: 200,
});

Приведенный выше фрагмент приводит к следующей анимации:

Давайте воспользуемся приведенным выше фрагментом, чтобы подробнее рассказать об анатомии объекта анимации.

Цели

  • Мы используем targets, чтобы сообщить Anime, как находить элементы на странице.
  • #box: найти элемент с идентификатором коробки
  • .box: найти все элементы с классом коробки
  • document.getElementById('box'): используйте узел DOM с box id

Значения свойств

  • Задав одно числовое значение для свойства, Anime будет предполагать, что вы хотите использовать единицу измерения элемента (без единиц измерения). Он также будет использовать начальное значение элемента по умолчанию для анимации.
  • Вы можете явно указать начальное значение свойства, задав значение в виде массива. Например, вы можете анимировать позицию x от 50 до 200, просто используя массив: translateX: [50, 200].
  • Вы можете использовать разные единицы измерения, используя такую ​​строку: translateX: '1rem'
  • Вы также можете использовать функцию для любого свойства:

translateX: (elm, index, t) => index * 2

  • Использование функции позволяет программно устанавливать свойства анимации элемента.
  • Кроме того, использование функции очень полезно при анимации нескольких элементов.

Свойства анимации:

Наиболее распространенными свойствами анимации являются функции duration и easing:

  • Вы можете установить продолжительность анимации с помощью свойства duration. Если duration не указан, Anime по умолчанию будет 1000ms.
  • Используя функцию easing, вы можете определить, как значения будут меняться с течением времени. easing по умолчанию установлен на easeOutElastic.

Анимация нескольких элементов

Давайте посмотрим на другой пример и воспользуемся дополнительными атрибутами для создания анимации с несколькими элементами:

const boxesAnimation = anime({
  targets: '.js-box',
  translateX: (elm, index, t) => index * 50,
  scale: 2,
  easing: 'easeInOutSine',
  delay: (elm, index, t) => index * 20,
  duration: 1200,
  loop: true,
  direction: 'alternate',
});

В приведенном выше фрагменте:

  • Мы ориентируемся на все элементы на странице с помощью класса js-box
  • Мы анимируем два свойства преобразования CSS:
  • translateX: мы используем функцию для перемещения каждого элемента в зависимости от их индекса.
  • i = 0: переместите первый ящик 0 сумма
  • i = 1: переместите второй ящик, 1 * 50 сумма
  • i = 2: переместите третий ящик, 2 * 50 = 100 сумма
  • масштаб: мы масштабируем каждый элемент в 2 раза их начальное значение (делая каждый элемент в два раза больше)
  • Мы устанавливаем функцию плавности для одной из предопределенных функций плавности easeInOutSine
  • Мы определяем delay для каждого элемента для выполнения всех переходов свойств:
  • i = 0: отложить начало анимации для первого элемента на 0 * 20 = 0ms
  • i = 1: отложить начало анимации для второго элемента на 1 * 20 = 20ms
  • i = 2: отложить начало анимации для третьего элемента на 2 * 20 = 40ms
  • Мы определяем duration как 1200ms для каждого набора переходов элемента.
  • Мы также устанавливаем цикл анимации, задав loop: true
  • А с атрибутом direction мы говорим Anime изменить направление анимации с normal на reverse.
  • Установка direction на чередование практически заставляет анимацию воспроизводиться вперед и назад поочередно.
  • Другие возможные значения направления: normal и reverse.

Собираем все вместе

Теперь давайте объединим то, что мы узнали, и создадим следующую анимацию:

Во-первых, нам нужно установить html-разметку для нашей страницы. Следующий фрагмент загружает Anime.js, необходимый CSS и нашу анимацию JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/squares.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
  <title>Anime Animation</title>
</head>
<body>
  <div class="boxes">
    <div class="boxes__inner">
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
      <div class="box js-box"></div>
    </div>
  </div>
  <script src="/squares.js"></script>
</body>
</html>

Затем нам нужно определить набор CSS, чтобы подготовить набор для нашей анимации. Самая важная часть этого CSS - селектор .boxes__inner. В этом селекторе мы устанавливаем фиксированное значение высоты div, а также скрываем переполнение. По сути, это заставит блоки «появляться» из нижней части внешнего div, что приведет к приятному плавному эффекту. Остальной CSS довольно понятен. По сути, мы устанавливаем приятный цвет фона для страницы и центрируем все на странице.

CSS:

html, body {
  padding: 0;
  margin: 0;
  background-color: #25275a;
  width: 100%;
  height: 100%;
}
.box {
  width: 50px;
  height: 150px;
}
.boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.boxes__inner {
  display: flex;
  overflow: hidden;
  height: 165px;
}

JS

const boxesAnimation = window.anime({
  targets: '.js-box',
  translateY: [150, 50],
  backgroundColor: (el, i, t) => {
    const r = 58 + (i * 12);
    const g = 35 + (i * 12);
    const b = 220;
    const color = `rgb(${r}, ${g}, ${b})`;
    return color;
  },
  duration: 900,
  easing: 'easeOutElastic',
  elasticity: 500,
  delay: (el, i, t) => i * 20,
  loop: true,
  direction: 'alternate',
});

Теперь давайте рассмотрим JavaScript более подробно. Во фрагменте кода JavaScript выше:

  • Мы анимируем все элементы на странице с помощью класса .js-box
  • Мы анимируем два свойства для каждого блока:
  • translateY: мы просто анимируем вертикальное положение каждого блока от 150 до 50. Это заставляет каждый блок отображаться снизу внешнего div вверх.
  • backgroundColor: для цвета фона мы используем функцию и устанавливаем цвет каждого поля по-разному:
  • i = 0: для первого поля установлен цвет rgb(58, 35, 220)
  • i = 1: для второго поля установлен цвет rgb(58 + 12, 35 + 12, 220)
  • …
  • i = 10: для одиннадцатого поля установлен цвет rbg(58 + 120, 35 + 120, 220)
  • По сути, с помощью функции мы сохраняем синий компонент неизменным, постепенно меняя красный и зеленый компоненты. Это приводит к красивому градиенту, изменяющему цвет для каждого поля с течением времени.
  • Мы устанавливаем длительность всех переходов для каждого бокса на 900 мс.
  • Кроме того, мы определяем функцию плавности как одну из предопределенных функций плавности, т.е.easeOutElastic
  • Мы также используем атрибут elasticity, чтобы определить, насколько эластичными должны быть переходы. Свойство elasticity действительно только для elastic функций плавности.
  • Задержка анимации каждого окна определяется с помощью функции:
  • i = 0: переходы первого блока начнутся после задержки 0 * 20 = 0ms
  • i = 1: переходы второго блока начнутся после задержки 1 * 20 = 20ms
  • …
  • i = 10: переходы одиннадцатого блока начнутся после задержки 10 * 20 = 2000ms
  • Функция задержки, по сути, делает анимацию интересной, заставляя каждый прямоугольник появляться один за другим с задержкой 20 мс.
  • Мы также зацикливаем анимацию, используя свойство loop: true
  • И, наконец, мы делаем цикл анимации вперед и назад, используя свойство direction: 'alternate'.

Тонкая настройка перехода цвета фона

Хотя приведенная выше анимация вполне приемлема, было бы неплохо контролировать продолжительность и переход цветового перехода фона. В Anime вы можете иметь детальный контроль над каждым переходом свойств с помощью объекта:

anime({
  property: {
    value: ...,
    transition: ...,
    duration: ...,
    /* etc */
  }
});

Например:

anime({
  scale: {
    value: 2,
    transition: 'linear',
    duration: 1000,
  },
  opacity: 1,
  height: [0, 100],
  transition: 'easeInOutSine',
  duration: 500,
});

В приведенном выше фрагменте все свойства переходят с использованием функции easeInOutSine более 500 мс, за исключением свойства scale. Свойство scale будет линейно анимировать более 1000 мс. Мы можем применить то же самое к нашему фоновому переходу и сделать его более плавным:

const boxesAnimation = window.anime({
  targets: '.js-box',
  translateY: [150, 50],
  backgroundColor: {
    value: (el, i, t) => {
      const r = 58 + (i * 12);
      const g = 35 + (i * 12);
      const b = 220;
      const color = `rgb(${r}, ${g}, ${b})`;
      return color;
    },
    easing: 'linear',
    duration: 200,
  },
  duration: 900,
  easing: 'easeOutElastic',
  elasticity: 500,
  delay: (el, i, t) => i * 20,
  loop: true,
  direction: 'alternate',
});

Как видите, мы присвоили объект backgroundColor и переместили функцию на value. И мы также определили линейное замедление и продолжительность 200 мс для каждого перехода цвета фона блока. Вы можете увидеть результат ниже:

Заключение

Мы увидели, как легко создать плавную анимацию с помощью пары строк JavaScript, используя Anime.js. В Anime.js есть множество других функций, таких как временные шкалы, ключевые кадры и SVG-анимация. Обязательно ознакомьтесь с Документацией аниме для получения более подробной информации и примеров.