Angular & Анімації: оживляємо додатки

Від автора: рух допомагає зрозуміти красу. Я завжди захоплювався анімацією, вона народжує душу програми, перетворюючи його в живу істоту, яка реагує на наші дії. Це допомагає зрозуміти його функціональність і змушує співпереживати. Як і скрізь, в Angular анімація полягає в переході елемента з вихідного стану (initial state) в кінцеве (final state), і в обчисленні середніх станів для забезпечення появи руху.

CSS-анімація

Основною властивістю, яка дозволяє анімувати елемент CSS, є перехід:

.елемент {
перехід: [властивість] [тривалість] [легкість] [затримка]
}

Всередині нього ми можемо оголосити [властивість], яким хочемо оживити, [тривалість] анімації, тип потоку [легкість], і [затримка].

Ми можемо анімувати тільки:

Ми можемо ініціювати перехід CSS з:

document.getElementsByClassName (‘circle’) [0] .classList.add (“square”);

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

Продуктивність.

З міркувань продуктивності завжди обмежуйте анімацію «перетворенням» (переклад, масштабування, обертання) і «непрозорістю».

Тепер, коли ви стали експертом по анімації CSS, давайте подивимося, як застосувати це до Angular.

Анімація Angular

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

let elem = document.getElementsByClassName (‘circle’) [0];
elem .animate ({transform: ‘scale (0)’, opacity: 0}, 3000);
elem .pause () ;

Настройка анімації

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

import { Component, OnInit } from ‘@angular/core’;
import { trigger, state, style, animate, transition group } from ‘@angular/animations’;
@Component({
selector: ‘my-app’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’],
animations: [ …animation declarations ]
})
export class AppComponent…

Використання анімацій

// app.component.ts
@Component({
…
animations: [
trigger(‘triggerName’, [
transition(‘initialState => finalState’, [
animate(‘1500ms ease-in’)
])
])
],
…
})

Оголошення анімації складається як мінімум з:

Після оголошення анімації в компоненті ми можемо застосувати його до елементу, який ми хочемо оживити в шаблоні.

// app.component.html

Зверніть увагу, що ми більше не використовуємо CSS, всі анімації управляються JS і HTML.

Стану

Як і в будь-анімації, анімації Angular — це переходи між двома стилізованими станами. Існує 2 типи станів:

Загальні переходи зі стандартними станами: « void => * » (коли елемент входить) і « * => void » (коли елемент виходить).

trigger(‘enterLeave’, [
// Animate 1500ms with ease-in flow any element that
// from transitions void state (not present) to any other state
transition(‘void => *’, [ // This transition’s alias is ‘:enter’
animate(‘1500ms ease-in’)
])
])

Якщо ми застосуємо цю анімацію до елемента …то побачимо, що нічого не відбувається. Це тому, що в стані елемент «void» відсутня в поданні, тому не має ніякого стилю для переходу.

Без стандартного початкового стану браузер не може обчислити перехід цих властивостей в кінцевий стан. За замовчуванням кінцевий стан є елементом, природно поміщеним до подання з властивостями, які ми застосували до нього в CSS.

Стилі

Ми можемо визначити стилі з функцією style(). Існує два типи стилів:

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

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

trigger(‘enterLeave’, [
transition(‘void => *’, [
// ‘From’ Style
style({ opacity: 0.2, transform: ‘translateX(-100%)’ }),
animate(‘1500ms ease-in’)
])
])

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

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

trigger(‘enterLeave’, [
transition(‘void => *’, [
// ‘From’ Style
style({ opacity: 0.2, transform: ‘translateX(-100%)’ }),
animate(‘1500ms ease-in’,
// ‘To’ Style
style({ opacity: 1, transform: ‘scale(1.5)’ }),
)
])
])

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

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

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

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

trigger(‘enterLeave’, [
transition(‘void => *’, [
// ‘From’ Style
style({ opacity: 0.2, transform: ‘translateX(-100%)’ }),
animate(‘1500ms ease-in’)
]),
transition(‘* => void’, [
animate(‘1500ms ease-in’,
// ‘To’ Style
style({ opacity: 1, transform: ‘translateX(100%)’ }),
)
])
])

Редактор: 1 – Коментуйте стилі «To», щоб видалити зростаючий елемент.

2 – Розкоментуйте ‘: LEAVE TRANSITION ‘ в app.component.ts, щоб побачити щось круте. Чудово, тепер елемент з’являється зліва, коли він створений (void), завдяки стилю «From», описаному в переході.

Потім, коли він віддаляється, він знову переходить в «void», залишаючи екран, завдяки стилям «To».

Коли перехід закінчується, всі стилі переходу видаляються, і елементи повертаються в свій стиль кінцевого переходу (void === not present). І оскільки елемент знаходиться поза вікна, ми не бачимо різкого зникнення.

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

Крім станів за замовчуванням, ми також маємо можливість створювати власні стану та керувати ними, коли вони застосовуються до елемента:

trigger(‘selected’, [
// Custom state
state(‘selected’,
style({
backgroundColor: ‘whitesmoke’,
transform: ‘scale(1.2)’,
})
),
// When the element goes from ‘selected’ state to whatever…
transition(‘selected *’, [
animate(‘300ms ease-in’)
])
])

У поданні наш анімаційний тригер отримує змінну elementState з класу компонента.

// app.component.html

Коли elementState === ‘selected’ , стилі “вибраного” стану будуть застосовані до нього. Коли стан змінюється, елемент переходить у будь-який інший стан, як визначено (animate (‘300ms ease-in’)).

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

Редактор: натиснути на синю кнопку вибору елементів, щоб застосувати стан «selected» і запустити анімацію.

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

transition(‘selected => *’, [
group([
// Apply pink color to the item and
animate(‘1s ease’,
style({
backgroundColor: ‘#ffc107’
})
),
// after a second, fade it to the background
animate(‘2s 1.5 s ease’,
style({
opacity: 0.2,
transform: ‘scale(0.5)’
})
)
])
])

Редактор: 3 – Коментуйте «selected» стан «transition» і розкоментуйте GROUPED ANIMATIONS, щоб побачити їх у дії.

І останній трюк. Потрібно запустити які-небудь дії, коли анімація закінчується? Легко, просто прив’яжіть їх до події «done».