• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Библиотека для анимации Anime.js

Alpine.js, jQuery и JavaScriptПросмотров: 2309Комментарии: 01 февраля 2021 г.

WEB-анимация достаточно специфичная область и не каждый разработчик с ней сталкивается. Если не рассматривать создание сложной «мультипликации», то современная анимация на сайтах выполняется с помощью CSS. Возможности здесь большие, поэтому сейчас доступно множество самых разных библиотек, предлагающих готовые css-классы.

У такого подхода есть несколько ограничений. Поскольку сама анимация жестко прописывается в виде класса, то для изменений требуется новая sass-компиляция или новый css-класс. Если, скажем, мы описываем анимацию цвета, то для 10 вариантов потребуется как минимум 10 новых классов. Аналогичная ситуация с размерами, отступами и т.д. То есть анимация в виде css-классов больше рассчитана на какие-то «фиксированные»/«типовые» эффекты.

Я уже много писал про Alpine.js как замену jQuery. Но у jQuery есть специальный метод .animate(), с помощью которого можно создать анимацию. Она довольно ограниченная, но для многих задач её хватает. В Alpine.js такого нет, поэтому я нашёл отдельную библиотеку Anime.js, с помощью которой можно создавать совершенно потрясающие вещи.

Anime.js прекрасно дополняет Альпину. Примеры я будут показывать именно в такой связке, поскольку это не только здорово упрощает js-код, но и позволяет задействовать lazy-загрузку js-файлов в конце BODY.

К достоинствам Anime.js можно отнести и очень малый размер js-файла — всего 17Кб (это примерно 7Кб трафика).

Рассмотрим первый простой пример - анимация кнопки:

<button x-data @click="anime({
		targets: $el,
		duration: 1000,
		easing: 'linear',
		rotate: [360, 0]
	});" class="button button1">Animate</button>

Это компонент Альпины, где мы цепляемся к клику по кнопке. Функция anime() принадлежит Anime.js — собственно именно она и выполняет анимацию. Магическая переменная Альпины $el указывает на текущий DOM-элемент. То есть этот код можно трактовать как «сделай анимацию текущего элемента по клику».

Функция anime() принимает ряд параметров.

  • targets — это элемент, который будет анимироваться
  • duration — время анимации в милисекундах
  • easing — «временная» функция анимации, здесь анимация линейная
  • rotate — это css-свойство, которое будет анимироваться, в данном случае это transform: rotate()

В течение 1 секунды кнопка вначале развернётся на 360 градусов, а потом вернётся к нулевому положению. То есть значения css-свойства можно записывать как в виде одного числа (это будет одно действие), так и в виде массива.

<button x-data @click="anime({
		targets: $el,
		duration: 1000,
		easing: 'easeInOutQuad',
		rotate: '+=720'
	});" class="button button1">Animate</button>

В этом примере анимация устанавливает свойство rotate в 720 градусов к предыдущему значению.

Если указать просто 720, то повторное нажатие кнопки уже не изменит это значение, поскольку оно уже установлено. Но если мы укажем [720, 0], то анимация вернётся в начальную точку. Либо использовать функцию сброса анимации перед её началом.

Рассмотрим более сложный пример:

<div x-data @click="anime({
		targets: $el,
		duration: 3000,
		rotate: [360, 60, 30, 15, 0, -3, -7, -30, 0],
		easing: 'linear',
		complete: function () {
		   $el.classList.toggle('bg-green500');
		   $el.classList.toggle('bg-blue500');
		},
	});" class="w200px h200px bg-green500"></div>

Здесь вращение, которое задаётся в виде массива значений, а также функция complete(), которая срабатывает после завершении анимации. Заметьте, что в начале цвет квадрата зелёный, а потом меняется на синий.

Anime.js позволяет анимировать любое css-свойство (в отличие от jQuery). Вот такой пример:

<div x-data @click="play2($el)" class="w200px h200px bg-red500"></div>

<script>
function play2(el) {
    let an = anime.timeline({
      targets: el,
      duration: 700,
      easing: 'linear',
    });

    an
      .add({
        backgroundColor: '#FFFF00',
        scale: 1.1,
        borderRadius: ['0%', '50%'],
      })
      .add({
        backgroundColor: '#00FF00',
        scale: .9,
      })
      .add({
        backgroundColor: '#00FFFF',
        scale: 1.3,
      })
      .add({
        backgroundColor: '#0000FF',
        scale: 1,
        opacity: .5,
      })
      .add({
        backgroundColor: '#FF0000',
        scale: 1.2,
      })
      .add({
        scale: 1,
        borderRadius: ['50%', '0%'],
      })      
}
</script>

Функцию анимации я вынес отдельно, чтобы не загромождать HTML. Функция timeline() задаёт базовую настройку анимации. А функции add() задают timeline — то есть вначале будет выполнена первая анимация, потом вторая и т.д.

Во всех примерах анимация применяется к текущему элементу. Но, что делать, если анимировать нужно сразу несколько? Здесь опять же на помощь приходит «магия» Alpine.js: используем $refs.

Прямая - это убежавшая точка

<div x-data @click="
	anime({
		targets: $refs.ht,
		duration: 700,
		easing: 'linear',
		translateY: [20, 0 -10, 0],
		translateX: [0, 15],
	});
	
	anime({
		targets: $refs.bt,
		duration: 500,
		delay: 300,
		easing: 'linear',
		translateY: [0, -7],
		width: [0, '100%'],
		height: [0, 14],
		backgroundColor: ['#fff', '#FACC60'],
		borderRadius: [0, 5],
	});">
	
	<h1 x-ref="ht" class="mar0 pos-relative z-index1 t-red t-impact">Прямая - это убежавшая точка</h1>
	<div x-ref="bt"></div>
</div>

Здесь запускается анимация для $refs.ht и $refs.bt с той разницей, что для второго элемента дополнительно прописана задержка в параметре delay. Но идея в том, что анимировать можно любые элементы по любым js-событиям.

Попробуем теперь повторить некоторые jQuery-эффекты. Самый простой это fadeOut — исчезновение через прозрачность.

Текст текст fadeOut
<div x-data @click="anime({
	targets: $el,
	duration: 1000,
	opacity: 0,
	easing: 'linear',
});" class="t200 bg-green">Текст текст fadeOut</div>

Теперь эффект slideUp — когда элемент смещается вверх. Здесь нам нужно уже задать дополнительный контейнер, который скрывает выходящее за его границы содержимое. Сама анимация применяется к css-свойству top — мы смещаем элемент вверх (отрицательное число) на всю его высоту.

Текст текст slideUp
<div class="overflow-hidden">
	<div x-data @click="anime({
		targets: $el,
		duration: 1000,
		top: -$el.clientHeight,
		easing: 'linear',
	});" class="t200 bg-green pos-relative">Текст текст slideUp</div>
</div>

Аналогично можно сделать slideDown, где тот же алгоритм, только top увеличивается.

Текст текст slideDown
<div class="overflow-hidden">
	<div x-data @click="anime({
		targets: $el,
		duration: 1000,
		top: $el.clientHeight,
		easing: 'linear',
	});" class="t200 bg-green pos-relative">Текст текст slideDown</div>
</div>

В этих примерах после анимации блок всё равно занимает исходное место. Чтобы его спрятать можно ещё анимировать свойство height и opacity для красоты.

Текст текст slideUp + fadeOut + height
<div class="overflow-hidden">
	<div x-data @click="anime({
		targets: $el,
		duration: 1000,
		opacity: 0,
		top: -$el.clientHeight,
		height: 0,
		easing: 'linear'
	});" class="t200 bg-green pos-relative">Текст текст slideUp + fadeOut + height</div>
</div>

Либо можно высоту не трогать, а потом её уменьшить до нуля в complete:

Текст текст slideUp + fadeOut + height
<div class="overflow-hidden">
	<div x-data @click="anime({
		targets: $el,
		duration: 1000,
		opacity: 0,
		top: -$el.clientHeight,
		easing: 'linear',
		complete: function () {
			$el.style.height = 0;
		},
	});" class="t200 bg-green pos-relative">Текст текст slideUp + fadeOut + height</div>

Минус такого подхода в том, что возникает «скачок» отображения нижнего блока. Хотя, можно добавить ещё одну анимацию после исчезновения блока, анимировать его высоту до нуля.

Итого

Anime.js я стал использовать не так давно, когда стала задача анимировать один из компонентов шапки в MF. Я долго боролся с этой задачкой через привычные css-классы, но там были сложные условия (несколько положений по onscroll), поэтому решил попробовать Anime.js и был приятно удивлён. Анимацией я никогда не занимался, но с Anime.js это оказалось очень просто.

Я рекомендую заглянуть в документацию этой библиотеки, где приведено «море» рабочих примеров, демонстрирующих её возможности. Сделано, конечно, на высоте.

Для меня Anime.js цена ещё и тем, что она фактически закрывает проблему перехода с jQuery на Alpine.js для тех случаев, когда нужна анимация. Даже если сравнивать размеры, то jQuery 3.5 — 89Кб и это примерно в 2 раза больше, чем сумма Alpine + Anime (25Кб и 17Кб). С учётом их потрясающих возможностей можно смело выкидывать jQuery на «свалку истории». :-)


Создание сайтов (Украина) →
Релиз шаблона MF 11 (февраль 2021)
Адаптивная сетка на flexbox
twitter.com facebook.com
Другие записи сайта
Визуальное программирование на Java
Визуальное программирование на Java
Mixin в LESS бывают разные
Mixin в LESS бывают разные
Релиз шаблона MF 12 (май 2021)
Релиз шаблона MF 12 (май 2021)
Базовые приёмы работы с CSS-переменными
Базовые приёмы работы с CSS-переменными
Приватные репозитории GitHub для работы с клиентами
Приватные репозитории GitHub для работы с клиентами
Корректное урезание строк по словам в PHP
Корректное урезание строк по словам в PHP
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.3186 | SQL: 20 | Память: 4.63MB | Вход