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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Внутри массива анимациий компонента мы вызываем функцию 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree