Angular позволяет создавать мощные анимации и активировать их на основе множества факторов. Вы можете размещать анимации на любых HTML-элементах и запускать их во время жизненных циклов, пользовательских событий и т. д.
Одним из изменений в Angular 4 было перенесение анимационных функций из ядра Angular в отдельную анимационную библиотеку. Это означает, что если вы хотите интегрировать анимацию в свое приложение на Angular 4, вам нужно будет использовать npm для установки пакета анимации, а затем импортировать библиотеку в файл app.module.ts.
Установка
Убедитесь, что вы используете Angular CLI для создания нового проекта Angular. В папке проекта вашего Angular-приложения в консоли введите:
> npm install @angular/animations@latest --save
Это сохранит последнюю версию библиотеки анимаций, а также сохранит ее как зависимость в файле package.json. Далее в файле /src/app/app.module.ts мы добавим импорт:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
В массив импортов декоратора @NgModule мы добавим:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule
],
})
Подготовка компонента к анимации
Во-первых, нам нужно импортировать некоторые анимационные функции в начало предполагаемого компонента:
import {
trigger,
state,
style,
transition,
animate,
keyframes
} from '@angular/animations';
Для работы анимации требуются все эти функции, за исключением keyframes. Если ваш шаблон компонента не будет включать поэтапную анимацию, вы можете не писать keyframes Затем мы должны добавить свойство animations в декоратор @Component():
@Component({
selector: 'app-root',
template: `
<p>Я буду анимирован</p>
`,
styles: [``],
animations: [
// Здесь определяем анимацию
]
})
Чтобы сделать все максимально просто, мы используем встроенный HTML и CSS. Теперь займемся анимацией.
Анимационные триггеры
Помните, мы импортировали функцию trigger ввеху? Так вот, функция trigger является отправной точкой каждой уникальной анимации. Первый аргумент принимает имя анимации, а второй - все другие функции анимации, которые мы импортировали.
И так, в свойство animations декоратора компонента, мы добавим:
animations: [
trigger('myAwesomeAnimation', [
]),
]
Обратите внимание на запятую после функции триггера. Так вы можете определить несколько анимаций, каждая из которых имеет уникальные имена анимаций, определенные в первом аргументе.
Анимирование с помощью state и style
Функция state позволяет вам определять разные состояния, которые вы можете вызывать и переходить между ними. Первый аргумент принимает уникальное имя, а второй аргумент - функцию style.
Функция style позволяет применить объект с именами свойств веб-анимации и связанными значениями.
Итак, расширяя наш предыдущий пример:
animations: [
trigger('myAwesomeAnimation', [
state('small', style({
transform: 'scale(1)',
})),
state('large', style({
transform: 'scale(1.2)',
})),
]),
]
У нас есть два разных состояния, в которых свойство scale переходит от значения по умолчанию (1) до 1,2. Далее мы разберем функцию transition.
Переходы Анимации
Функция transition (переход) - это то, что делает реальную анимацию. Первый аргумент представляет собой направление между двумя различными состояниями, а второй аргумент - функция animate.
Функция animate позволяет определить длину, задержку и ослабление перехода. Он также позволяет вам задать функцию style для определения стилей во время переходов или функцию keyframes для многоступенчатой анимации; обе из которых находятся во втором аргументе функции animate (анимировать).
На данный момент мы опустим второй аргумент анимированной функции.
animations: [
trigger('myAwesomeAnimation', [
state('small', style({
transform: 'scale(1)',
})),
state('large', style({
transform: 'scale(1.2)',
})),
transition('small => large', animate('100ms ease-in')),
]),
]
Здесь transition определяет длину перехода, а также тип ослабления, когда элемент HTML, использующий триггер myAwesomeAnimation переходит из состояния small в large.
Давайте сейчас оставим это так, а потом снова вернемся.
Анимация в шаблоне
Наш шаблон очень прост: всего-навсего один элемент абзаца. Добавим к нему анимацию и событие click, связанное с методом.
template: `
<p [@myAwesomeAnimation]='state'
(click)="animateMe()">Я буду анимирован</p>
`,
Как видите, чтобы добавить анимацию к HTML элементу, you wrap brackets around the trigger name, preceded by an @. Вы привязываете его к выражению шаблона, являющееся в данном случае свойством, которое мы определим в классе компонента.
Прежде чем мы это сделаем, давайте добавим нашему абзацу CSS-стили в свойстве styles:
styles: [`
p {
width:200px;
background:lightgray;
margin: 100px auto;
text-align:center;
padding:20px;
font-size:1.5em;
}
`],
Теперь давайте поработаем над компонентом.
Making it Work in the Component
Теперь мы должны определить свойство состояния и метод. Итак, в классе компонентов добавим:
export class AppComponent {
state: string = 'small';
animateMe() {
this.state=(this.state==='small'? 'large' : 'small');
}
}
Когда приложение загружается, мы связываем свойство state с состоянием small нашей анимации.
Затем, когда пользователь нажимает на элемент абзаца, он вызывает метод animateMe(). Inside, it simply toggles back and forth between small and large.
Сохраните код и запустите ng serve в консоли в папке проекта и понаблюдайте как он работает!
Анимация в данный момент работает только в одном направлении, потому что мы установили только одно свойство перехода из small в large.
Чтобы он работал в обоих направлениях измените small => large на small <=> large, что означает 'в обоих направлениях'.
Сохраните это и now both state changes are animating.
Добавление стилей во время переходов
Как упоминалось ранее, вы можете добавить второе свойство к функции animate которое принимает функцию style. Давайте сделаем это.
transition('small <=> large', animate('300ms ease-in', style({
transform: 'translateY(40px)'
}))),
С помощью этого кода мы перемещаем элемент абзаца на 40 пикселей.
Добавление ключевых кадров в анимацию
Второй аргумент функции animate также принимает функцию keyframes. Это позволяет создавать сложные, последовательные анимации.
transition('small <=> large', animate('300ms ease-in', keyframes([
style({opacity:0, transform:'translateY(-75%)', offset:0}),
style({opacity:1, transform:'translateY(35px)', offset:0.5}),
style({opacity:1, transform:'translateY(0)', offset:1.0})
]))),
Функция keyframes принимает массив функций style, которые включают в себя свойства анимации и смещение (offset). Смещение обозначает точку, в которой начинается следующая функция style во время анимации: 0 - начало, а 1 - конец.
Вот, в двух словах, как работает анимация в Angular.