Анимации, если их использовать с умом, могут поднять пользовательский опыт ваших веб-сайтов на совершенно другой уровень, и хотя поначалу это может показаться пугающим, благодаря библиотекам, таким как 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-файл. Есть несколько разных способов сделать это:
- Скачайте минимизированную версию библиотеки с сайта anime.js и включите ее в свой проект вручную.
- Используйте 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 для нового релиза.