Анимации, если их использовать с умом, могут поднять пользовательский опыт ваших веб-сайтов на совершенно другой уровень, и хотя поначалу это может показаться пугающим, благодаря библиотекам, таким как anime.js, вы можете создавать потрясающие эффекты, немного попрактиковавшись.

Добро пожаловать в первый туториал из этой серии по анимации с помощью anime.js! В этом уроке я расскажу об основах настройки anime.js и создания простых анимаций. К концу этого урока у вас должна быть прочная основа для создания более сложных анимаций с помощью anime.js в будущем.

Прежде чем мы углубимся, давайте быстро рассмотрим, что такое anime.js и почему вы можете захотеть его использовать. anime.js — это легкая библиотека JavaScript, которая упрощает создание сложных высокопроизводительных анимаций в Интернете. Он имеет простой, интуитивно понятный API и широкий спектр функций, которые позволяют создавать различные типы анимации, от простых затухания и слайдов до более сложных морфингов и анимаций на основе пути.

Прежде чем мы продолжим, помните, что вы можете создавать свои веб-сайты, целевые страницы, API и многое другое с или без кодирования на DoTenX бесплатно. . Обязательно ознакомьтесь с ним и даже назначьте свою работу для демонстрации.DoTenXс открытым исходным кодом, и вы можете найти репозиторий здесь:github.com/dotenx/dotenx.

Теперь приступим.

Шаг 1: Настройте среду

Чтобы использовать anime.js, вы должны включить библиотеку в свой HTML-файл. Есть несколько разных способов сделать это:

  1. Скачайте минимизированную версию библиотеки с сайта anime.js и включите ее в свой проект вручную.
  2. Используйте CDN (сеть доставки контента), чтобы включить библиотеку в свой HTML-файл. Это самый простой и быстрый способ начать. Просто добавьте следующий тег script в заголовок вашего HTML-файла:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

3. Установите библиотеку с помощью npm и импортируйте ее в свой проект. Это лучший вариант, если вы создаете более крупный проект и нуждаетесь в более продвинутом способе управления своими зависимостями. Вы можете установить anime.js с помощью npm, выполнив в терминале следующую команду:

npm install animejs

После установки пакета вы можете импортировать его следующим образом:

import anime from 'animejs';

Шаг 2: Создайте базовую анимацию

Теперь, когда мы настроили библиотеку, давайте создадим первую анимацию. Мы начнем с самой простой анимации, которую мы можем создать с помощью anime.js, которая просто изменяет одно свойство CSS с течением времени. Давайте создадим эффект «затухания»:

<h1 id="my-element">Anime.js</h1>
anime({
  targets: '#my-element', // the element to be animated
  opacity: 0,
  duration: 1000,  // duration in milliseconds
});

Метод anime анимирует элемент, указанный в свойстве targets, и устанавливает его непрозрачность на 0 в течение 1000 миллисекунд.

Шаг 3. Анимируйте несколько свойств CSS

Мы можем передать несколько свойств CSS методу аниме и создать более сложную анимацию.

Примечание. Большинство свойств CSS вызывают изменение макета или перерисовку, что приводит к прерывистой анимации. Максимально отдайте приоритет непрозрачности и CSS-преобразованиям.

anime({
  targets: '#my-element',
  opacity: 0.5,
  marginLeft: '200px',
  duration: 3000,
});

Эта анимация затухает текст заголовка и в то же время перемещает его из исходного положения вправо на 200 пикселей.

Шаг 4: Создайте анимацию с преобразованиями

Мы также можем использовать любое из свойств в этой таблице для создания анимации с преобразованиями:

ДЕЙСТВУЮЩИЕ СВОЙСТВА

'translateX'

'translateY'

'translateZ'

'rotate'

'rotateX'

'rotateY'

'rotateZ'

'scale'

'scaleX'

'scaleY'

'scaleZ'

'skew'

'skewX'

'skewY'

'perspective'

Теперь давайте немного изменим элемент, чтобы сделать анимацию более заметной, и применим некоторые изменения трансформации.

<div id="box">
    <h1>Anime.js</h1>
</div>
#box {
  margin-left: 200px;
  margin-top: 200px;
  width: 100px;
  height: 100px;
  background: red;
}
anime({
  targets: '#box',
  translateX: 450,
  duration: 3000,
});

Вы также можете использовать несколько преобразований в анимации:

anime({
  targets: '#box',
  translateX: 450,
  scale: 2,
  rotate: '2turn',
  duration: 3000,
});

Шаг 5: Анимация чисел

С помощью anime.js вы можете легко анимировать числовые значения, а также свойства или преобразования CSS. Самый простой способ анимировать числа — определить объект, который определяет начальные значения, и анимировать их.

<h1 id="counter"></h1>
<h1 id="portion"></h1>
var counterEl = document.querySelector('#counter');
var portionEl = document.querySelector('#portion');
var numbers = {
  counter: 0,
  portion: '0%'
}
anime({
  targets: numbers,
  counter: 50,
  portion: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    counterEl.innerHTML = numbers.counter;
    portionEl.innerHTML = numbers.portion;
  }
});

Это анимирует innerHTML элементов от 0 и 0% до 50 и 100%. Мы также используем функцию обратного вызова update для обновления числовых значений в режиме реального времени по мере выполнения анимации.

Шаг 6: Анимируйте SVG

Anime.js позволяет анимировать любые атрибуты DOM, включая атрибуты SVG. Давайте создадим интересную анимацию с помощью простого SVG.

<svg width="200" height="200">
    <path d="M10,10 L190,10 L10,190 Z" fill="#00f" />
</svg>
anime({
  targets: 'svg path',
  d: [
    {value: 'M10,10 L190,10 L10,190 Z'},  // starting path
    {value: 'M10,10 L10,190 L190,10 Z'},  // ending path
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
});

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

В следующем уроке мы рассмотрим методы анимации с anime.js, и я объясню тайминг, замедление и ключевые кадры, так что следите за обновлениями.

Не забудьте посетить DoTenX, и вскоре на платформу будет добавлен специальный раздел анимации, позволяющий создавать потрясающие анимации с помощью концепций, которые вы здесь изучили. Следите за репозиторием Github для нового релиза.