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.

Чтобы создать простой эффект перехода, нам просто нужно указать триггер, а затем состояния анимации со стилями.

Затем мы должны указать, что делать при переходе в разные состояния.