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

Angular позволяет не только анимировать отдельные элементы, но и группировать несколько анимаций или запускать их последовательно, управляя временем их начала и завершения.

Групповые анимации

Групповые анимации выполняются одновременно. Используется функция group(), которая позволяет запускать несколько анимационных блоков параллельно. Это полезно для синхронизации изменений нескольких свойств элемента или нескольких элементов интерфейса.

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

trigger('moveAndFade', [
  transition(':enter', [
    group([
      animate('500ms ease-out', style({ opacity: 1 })),
      animate('700ms ease-in', style({ transform: 'translateX(100px)' }))
    ])
  ])
])

В этом примере одновременно изменяются непрозрачность и позиция элемента, создавая комплексный эффект.

Последовательные анимации

Последовательные анимации выполняются одна за другой с использованием функции sequence(). Это позволяет создавать сложные сценарии, где одно действие логически и визуально следует за другим.

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

trigger('stepAnimation', [
  transition(':enter', [
    sequence([
      animate('300ms', style({ opacity: 1 })),
      animate('400ms', style({ transform: 'translateY(20px)' })),
      animate('200ms', style({ transform: 'translateY(0)' }))
    ])
  ])
])

Элементы постепенно проявляются, двигаются и возвращаются в исходное положение, создавая эффект пошагового появления.

Комбинирование групп и последовательностей

Angular позволяет сочетать group() и sequence() для сложных анимаций. Например, можно запустить параллельно несколько анимаций на одном элементе и затем последовательно анимировать другой элемент:

transition(':enter', [
  sequence([
    group([
      animate('300ms', style({ opacity: 1 })),
      animate('300ms', style({ transform: 'scale(1.1)' }))
    ]),
    animate('200ms', style({ transform: 'scale(1)' }))
  ])
])

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

Оглавление