Angular - это популярный интерфейсный фреймворк от Google. Подобно другим популярным интерфейсным фреймворкам, он использует компонентную архитектуру для структурирования приложений.
В этой статье мы рассмотрим, как создавать эффекты анимации в приложении Angular.
Начиная
Для начала нам нужно включить модуль анимации.
Мы делаем это, написав следующее:
app.module.ts
:
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Затем мы импортируем функции анимации в наш файл компонента следующим образом:
app.component.ts
:
import { trigger, state, style, animate, transition, // ... } from '@angular/animations';
Наконец, мы добавляем свойство метаданных animation
в наш компонент следующим образом:
@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], animations: [ // animation triggers go here ] })
Состояние и стили анимации
Мы вызываем функцию state
, чтобы определить различные состояния, вызываемые в конце каждого перехода.
Требуется имя и style
функция. Он принимает объект со стилями CSS с именами атрибутов стиля в camelCase.
Затем мы определяем переходы с помощью функции transition
, которая принимает строку перехода состояния, и массива с вызовом функции animate
со строкой времени для анимации.
Все вызовы state
и transition
заключены в массив как второй аргумент функции trigger
.
Первый аргумент функции trigger
- это имя нашего триггера.
Мы пишем приложение со всеми частями для создания простого эффекта перехода следующим образом:
app.module.ts
:
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
app.component.ts
:
import { Component } from "@angular/core"; import { state, style, transition, animate, trigger } from "@angular/animations"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], animations: [ trigger("openClose", [ state( "open", style({ height: "250px", opacity: 1, backgroundColor: "pink" }) ), state( "closed", style({ height: "100px", opacity: 0.5, backgroundColor: "green" }) ), transition("open => closed", [animate("1s")]), transition("closed => open", [animate("0.5s")]) ]) ] }) export class AppComponent { isOpen = true; toggle() { this.isOpen = !this.isOpen; } }
app.component.html
:
<button (click)="toggle()">Toggle</button> <div [@openClose]="isOpen ? 'open' : 'closed'"> {{ isOpen ? 'Open' : 'Closed' }} </div>
В приведенном выше коде мы импортировали BrowserAnimationModule
в AppModule
.
Затем в массив метаданных animations
объекта AppComponent
мы добавляем триггер анимации с функцией trigger
.
Затем у нас есть переходные состояния, которые генерируются функцией state
.
Функция state
принимает вызов функции style
, которая возвращает стили для каждого состояния перехода.
Функция style
принимает объект со стилем CSS для каждого состояния перехода.
В компоненте у нас есть функция toggle
, которая переключает поле isOpen
при его вызове.
С помощью вызовов функций transition
мы указываем интервалы анимации с помощью функции animate
с переданной строкой времени.
Наконец, в шаблоне мы добавляем триггер openClose
в div. Мы отображаем стиль для состояния `open'
, когда isOpen
равно true
, и отображаем стиль для состояния 'closed'
в противном случае.
Если у нас есть другой триггер, мы можем изменить имя openClose
на другое имя триггера.
В конце, когда мы нажимаем кнопку Toggle, мы видим желтый фон высотой 250 пикселей и розовый фон высотой 100 пикселей. Непрозрачность также изменилась, как указано.
Сводка по API анимации
У Angular Animations API есть следующие функции:
trigger
- запускает анимацию и служит контейнером для всех вызовов функций анимации.style
- определяет стиль CSS для каждого этапа анимации.state
- создает именованный набор стилей CSS, которые должны применяться при успешном переходе в заданное состояние.animate
- указывает временную информацию анимацииtransition
- определяет последовательность анимации между двумя именованными состояниямиkeyframes
- позволяет последовательно менять стили в пределах заданного временного интервала.group
- указывает группу шагов анимации, которые будут выполняться параллельноquery
- используется для поиска одного или внутренних элементов HTML в текущем элементеsequence
- указывает список шагов анимации, которые идут последовательноstagger
- меняет время начала анимации для нескольких элементовanimatiom
- создает повторно используемую анимацию, которую можно вызывать из другого места.useAnimation
- активирует повторно используемую анимациюanimateChild
- позволяет запускать анимацию дочерних компонентов в те же временные рамки, что и родительские.
Заключение
Мы можем создавать анимацию с помощью встроенного Angular BrowserAnimationsModule
.
Чтобы создать простой эффект перехода, нам просто нужно указать триггер, а затем состояния анимации со стилями.
Затем мы должны указать, что делать при переходе в разные состояния.