Создание многократно используемой анимации с помощью Angular Animations

Создание многократно используемой анимации с помощью Angular Animations

От автора: в этой статье мы заново создадим кнопку хлопка Medium, используя Angular Animations. Эта статья предполагает базовые знания основных методов Angular Animations, таких как trigger(), transition() и т. д.

Мы изучим различные функции анимации, такие как:

Создание многократно используемой анимации (animation, useAnimation)

Выражения изменения состояния (:enter, :leave, :increment, :decrement).

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Средняя кнопка хлопка с помощью Angular Animations

Многократно используемая анимация

Создайте анимацию, вызвав функцию animation(). Она может содержать несколько интерполированных входных параметров, таких как {{timings}}.

Примените анимацию, вызвав функцию useAnimation(). Она принимает в качестве первого аргумента ссылку на анимацию, а в качестве второго — объект параметров. Мы передаем входные параметры через ключ params. В этом примере нам нужно указать значение таймингов: { timings: 200 }.

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

Создание импульсной анимации

Анимация пульсации

Мы создаем многократно используемую анимацию пульсации, вызывая функцию animation(). Она принимает входные параметры {{timings}} и {{scale}}. Анимация пульсации создается путем изменения размеров элемента через вызов функции keyframes.

Затем мы будем применяем анимацию внутри первого компонента.

Создание компонента FAB

FAB с анимацией пульсации

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Внутри массива анимациий компонента мы вызываем функцию trigger() с описательным именем counterChange.

Затем мы определяем переход и используем :increment в качестве выражения перехода состояния. Это идеально нам подходит, поскольку мы хотим выполнить анимацию, когда пользователь нажимает на кнопку, увеличивая счетчик хлопков.

Описание выражений изменения состояния

:increment — привязка увеличивается

:decrement — привязка уменьшается

:leave — элемент удаляется из DOM.

:enter — элемент входит в DOM.

Создание всплывающей анимации

Всплывающая анимация

Как и в анимации пульсации, мы используем функцию animation() для создания многократно используемой анимации. Мы также используем интерполяцию для определения входных параметров анимации.

Создание компонента Bubble

Bubble со всплывающей анимацией

Поскольку родительский компонент отображает и скрывает компонент Bubble, мы вызываем анимацию вставки и удаления слайдов. Для этого идеально подходят выражения изменения состояния :enter и :leave.

Мы применяем всплывающую анимацию, созданную на предыдущем шаге, вызывая функцию useAnimation() с соответствующими входными параметрами.

Заключение

Вот и все. Надеюсь, вам понравилась эта статья. Мы использовали множество впечатляющих функций Angular Animations, чтобы воссоздать кнопку хлопка Medium. Ниже приведены примеры кода.

stackblitz.com / github.com

Автор: Tomasz Kula

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: