Angular & Анимации: оживляем приложения

Angular & Анимации: оживляем приложения

От автора: движение помогает понять красоту. Я всегда восхищался анимацией, она рождает душу приложения, превращая его в живое существо, которое реагирует на наши действия. Это помогает понять его функциональность и заставляет нас сопереживать. Как и везде, в Angular анимация заключается в переходе элемента из исходного состояния (initial state) в конечное (final state), и в вычислении средних состояний для обеспечения появления движения.

Angular & Анимации: оживляем приложения

CSS-анимация

Основным свойством, которое позволяет анимировать элемент CSS, является переход:

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

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

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

Внутри него мы можем объявить [свойство], которым хотим оживить, [продолжительность] анимации, тип потока [легкость], и [задержка].

Мы можем анимировать только:

Элементы, которые имеют определенное начальное состояние для перехода от (т. Е. Width : 200px) и конечное состояние для перехода к (то есть: ширина: 400 пикселей).

Свойства, которые браузер может вычислять в своих состояниях, например ширину, высоту, размер шрифта …

Мы можем инициировать переход CSS с:

CSS : объявлением псевдо-класса: hover.

JS : добавление класса:

Настройка: наведите курсор на желтый круг, чтобы увидеть переход в действии. Проверьте app.component.scss, чтобы увидеть реализацию:

Производительность.

По соображениям производительности всегда ограничивайте анимацию «преобразованием» (перевод, масштабирование, вращение) и «непрозрачностью».

Теперь, когда вы стали экспертом по анимации CSS, давайте посмотрим, как применить это к Angular.

Анимация Angular

Анимации Angular основаны на API веб-анимациях, которые в основном привносят всю мощь анимации из CSS в JS, позволяя делать удивительные вещи, вроде приостановки или изменения анимации прямо в коде:

Настройка анимации

Чтобы начать использовать анимацию в проекте Angular, нам понадобятся:

Проект: установите BrowserModule и BrowserAnimationsModule и добавьте их в пакет package.json ( npm install —save @angular/animations @angular/platform-browser).

Модуль: добавьте в модули, в которых мы будем применять анимацию (обычно это app.module.ts или shared.module.ts).

Компонент: импортируйте функции, которые будете использовать. Объявите анимацию в декораторе компонента. { trigger, state, style, animate, transition } from ‘@angular/animations’

Использование анимаций

Объявление анимации состоит как минимум из:

Trigger (вызов) ( [ name], [definitions array] ): объявляет анимацию с именем, используемым для применения в шаблоне.

Transition (переход) ( [ states], [definitions array] ): Указывает два состояния ( initialState и finalState ), которые объединяют анимацию. Оператор ‘=>’ используется для однонаправленных переходов и <=> для двунаправленных.

Animation (анимация) (‘[duration] [delay] [ease]’): определяет тип анимации, который будет применяться к переходу между состояниями.

После объявления анимации в компоненте мы можем применить его к элементу, который мы хотим оживить в шаблоне.

Обратите внимание, что мы больше не используем CSS, все анимации управляются в JS и HTML.

Состояния

Как и в любой анимации, анимации Angular — это переходы между двумя стилизованными состояниями. Существует 2 типа состояний:

Стандартные: — void: когда элемент отсутствует в представлении, он находится в состоянии void. — * : подстановочный знак, соответствующий любому состоянию.

Пользовательские: Состояния, определённые пользователем с помощью state ().

Общие переходы со стандартными состояниями: « void => * » (когда элемент входит) и « * => void » (когда элемент выходит).

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

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

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

Если мы применим эту анимацию к элементу …то увидим, что ничего не происходит. Это потому, что в состоянии элемент «void» отсутствует в представлении, поэтому не имеет никакого стиля для перехода.

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

Стили

Мы можем определить стили с функцией style(). Существует два типа стилей:

Стили состояний: применяется к элементу, находящемуся в состоянии. Удаляется при изменении состояния.

Стили перехода: применяется к элементу, когда он переходит в свое конечное состояние. Удаляется, когда применяется конечное состояние (с его собственными стилями).

Внутри стилей перехода также есть деление на два типа:

1. Стили «From»: помещенные в начале перехода, они будут применены к элементу справа, когда тот будет создан.

Таким образом, элемент будет иметь стиль, когда исходное состояние «void», и браузер сможет выполнить переход from. Теперь переход работает, и мы можем видеть, как довольно прозрачный элемент (opacity: 0.2) входит с левой стороны экрана (translateX (-100%)) и переходит в свое конечное состояние в центре страницы, увеличивая непрозрачность.

2. Стили «To»: помещенные внутри animate (), они будут использоваться для перехода к нему из стиля «from» или, как в данном случае «void».

Теперь мы можем видеть элемент, входящий с левой стороны экрана, но на этот раз он изменяет свой масштаб на 50%, прежде чем вернуться в конечное состояние в центре страницы.

Стили «To» и «From» удаляются, когда переход завершается, поэтому переход завершается резким показом элемента с его оригинальными стилями CSS.

Редактор: Проверьте app.component.ts в редакторе ниже. Нажмите кнопку «Hide/Show», чтобы применить / удалить состояние «void» для элементов.

Давайте удалим стили «To» и добавим крутую анимацию «leave»:

Редактор: 1- Комментируйте стили «To», чтобы удалить растущий элемент.

2- Раскомментируйте ‘ : LEAVE TRANSITION ‘ в app.component.ts, чтобы увидеть кое-что крутое. Отлично, теперь элемент появляется слева, когда он создан (void), благодаря стилю «From», описанному в переходе.

Затем, когда он удаляется, он снова переходит в «void», покидая экран, благодаря стилям «To».

Когда переход заканчивается, все стили перехода удаляются, и элементы возвращаются в свой стиль конечного перехода (void === not present). И поскольку элемент находится вне окна, мы не видим резкого исчезновения.

Управление состояниями

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

В представлении наш анимационный триггер получает переменную elementState из класса компонента.

Когда elementState === ‘selected’ , стили «выбранного» состояния будут применены к нему. Когда состояние изменяется, элемент переходит в любое другое состояние, как определено (animate (’300ms ease-in’)).

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

Редактор: нажать на синюю кнопку выбора элементов, чтобы применить состояние «selected» и запустить анимацию.

Также можно запускать несколько анимаций параллельно с помощью group().

Редактор: 3- Комментируйте «selected» состояние «transition» и раскомментируйте GROUPED ANIMATIONS, чтобы увидеть их в действии.

И последний трюк. Нужно запустить какие-либо действия, когда анимация заканчивается? Легко, просто привяжите их к событию «done».

Вот и все думал, что это будет так долго, поэтому, надеюсь, вам понравилось. Спасибо за внимание.

Автор: Aleix Suau

Источник: https://medium.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