Angular Animations API

Angular Animations API предоставляет мощный и гибкий способ добавления анимаций в веб-приложения на Angular. Оно интегрировано с Angular и позволяет управлять анимациями на уровне компонентов, маршрутов и динамических изменений DOM. Основные возможности включают определение триггеров, состояний, переходов и временных функций для элементов интерфейса.

Импорт и настройка

Для использования анимаций необходимо импортировать модуль BrowserAnimationsModule в основной модуль приложения:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // другие модули
  ],
})
export class AppModule {}

После этого можно использовать функции из пакета @angular/animations для создания триггеров и эффектов.

Основные функции и концепции

Angular Animations строятся на триггерах (trigger), состояниях (state) и переходах (transition).

Триггер

Триггер связывает элемент DOM с набором анимаций. Пример определения триггера:

import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-box',
  template: `<div [@openClose]="isOpen ? 'open' : 'closed'"></div>`,
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'green'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'red'
      })),
      transition('open <=> closed', [
        animate('0.5s ease-in-out')
      ])
    ])
  ]
})
export class BoxComponent {
  isOpen = true;
}
  • state описывает визуальное состояние элемента.
  • style задаёт CSS-свойства для состояния.
  • transition определяет изменения между состояниями и временные функции.

Временные функции и синтаксис animate

Функция animate позволяет управлять длительностью анимации, задержкой и кривой временной функции:

animate('1s 0.2s ease-in-out', style({ opacity: 0 }));
  • 1s — длительность анимации.
  • 0.2s — задержка перед началом анимации.
  • ease-in-out — кривая ускорения.
  • style — конечное состояние элемента.

Переходы с использованием :enter и :leave

Для динамического отображения элементов применяются специальные псевдосостояния:

trigger('fadeInOut', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('500ms ease-in', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('500ms ease-out', style({ opacity: 0 }))
  ])
])
  • :enter — элемент добавляется в DOM.
  • :leave — элемент удаляется из DOM.

Это упрощает анимацию появления и исчезновения компонентов без необходимости создания отдельных состояний.

Группировка и последовательность анимаций

Angular позволяет выполнять несколько анимаций одновременно с помощью group или последовательно через sequence.

import { group, sequence } from '@angular/animations';

transition('closed => open', [
  group([
    animate('1s', style({ height: '200px' })),
    animate('0.5s', style({ opacity: 1 }))
  ])
])
  • group — параллельное выполнение анимаций.
  • sequence — последовательное выполнение шагов.

Анимации маршрутов

Angular Animations API интегрируется с маршрутизацией для создания плавных переходов между страницами. Для этого используется RouterOutlet с директивой [@triggerName]:

<main [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
  <router-outlet #o="outlet"></router-outlet>
</main>

В компоненте можно определить анимации с состояниями маршрутов и переходами:

trigger('routeAnimations', [
  transition('* <=> *', [
    style({ opacity: 0 }),
    animate('300ms', style({ opacity: 1 }))
  ])
])

Анимации с использованием ключевых кадров

Ключевые кадры позволяют задавать сложные анимации с промежуточными шагами:

import { keyframes } from '@angular/animations';

animate('2s', keyframes([
  style({ transform: 'translateX(0)', offset: 0 }),
  style({ transform: 'translateX(50px)', offset: 0.5 }),
  style({ transform: 'translateX(0)', offset: 1 })
]))
  • offset — процент времени анимации (от 0 до 1).
  • Позволяет точно контролировать движения и эффекты элемента.

Взаимодействие с компонентами

Анимации могут быть вызваны динамически через AnimationBuilder и AnimationPlayer, что даёт возможность создавать эффекты в коде без использования шаблона:

import { AnimationBuilder, style, animate } from '@angular/animations';

constructor(private builder: AnimationBuilder) {}

animateDiv(div: HTMLElement) {
  const factory = this.builder.build([
    style({ opacity: 0 }),
    animate('500ms', style({ opacity: 1 }))
  ]);
  const player = factory.create(div);
  player.play();
}
  • AnimationBuilder создаёт фабрику анимаций.
  • AnimationPlayer управляет воспроизведением (play, pause, reset).

Важные рекомендации

  • Использовать псевдосостояния (:enter, :leave) для управления динамическими элементами.
  • Разделять визуальное состояние и логическое управление через переменные компонента.
  • Сочетать group и sequence для сложных анимаций.
  • Минимизировать использование тяжелых анимаций для оптимизации производительности.
  • Для маршрутов применять триггеры напрямую к RouterOutlet.

Angular Animations API сочетает декларативный подход с возможностью детального управления, позволяя создавать плавные и интерактивные интерфейсы без необходимости подключения сторонних библиотек.

Оглавление