Временные функции анимаций

В Angular управление анимациями осуществляется через модуль @angular/animations, который предоставляет мощные инструменты для создания динамичных и отзывчивых интерфейсов. Одним из ключевых элементов анимаций являются временные функции (timing functions), определяющие, как изменяются свойства элементов во времени. Они задают характер движения, ускорение и замедление анимации, делая её более естественной или драматичной.

Основы определения временных функций

В Angular временные функции указываются в объекте анимации через параметр animation() или напрямую в триггере с помощью функции animate(duration, style). Стандартный синтаксис:

animate('500ms ease-in', style({ opacity: 1 }))

Здесь:

  • '500ms' — длительность анимации,
  • 'ease-in' — временная функция,
  • style({ opacity: 1 }) — конечное состояние свойства.

Встроенные функции временных кривых

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

  • linear — линейное изменение, скорость постоянная:

    animate('1s linear', style({ transform: 'translateX(100px)' }))

  • ease — стандартное ускорение и замедление: плавный старт и завершение.

  • ease-in — замедление в начале анимации.

  • ease-out — ускорение в начале и замедление к концу.

  • ease-in-out — комбинированное ускорение и замедление в начале и в конце.

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

Кастомные временные функции

Помимо встроенных кривых, можно создавать собственные кривые Безье, задавая их через синтаксис cubic-bezier(x1, y1, x2, y2). Пример:

animate('800ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ transform: 'scale(1.2)' }))

Здесь параметры x1, y1, x2, y2 определяют форму кривой:

  • x1 и x2 — горизонтальные контрольные точки,
  • y1 и y2 — вертикальные контрольные точки.

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

Использование временных функций в триггерах

В Angular анимации привязываются к элементам через триггеры (trigger) и состояния (state). Временные функции можно задавать для переходов между состояниями:

trigger('fadeSlide', [
  state('void', style({ opacity: 0, transform: 'translateY(-20px)' })),
  state('*', style({ opacity: 1, transform: 'translateY(0)' })),
  transition('void => *', [
    animate('600ms ease-out')
  ]),
  transition('* => void', [
    animate('400ms ease-in')
  ])
])

Здесь:

  • transition('void => *') — определяет анимацию появления элемента,
  • transition('* => void') — анимацию исчезновения,
  • для каждой анимации используется отдельная временная функция, обеспечивая различный характер движения при входе и выходе.

Сложные последовательности с временными функциями

Angular позволяет объединять несколько анимаций с различными временными функциями в одну последовательность с помощью sequence() или group(). Пример:

transition('void => *', [
  sequence([
    animate('300ms ease-in', style({ opacity: 0.5 })),
    animate('500ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
  ])
])
  • sequence() выполняет анимации последовательно,
  • group() позволяет запускать несколько анимаций параллельно, каждая с собственной временной функцией.

Практические рекомендации

  • Для анимаций появления элементов чаще используют ease-out, чтобы движение выглядело естественно.
  • Для скрытия элементов лучше применять ease-in, создавая ощущение «погружения».
  • Линейная функция (linear) подходит для циклических или постоянных эффектов, например, вращения или прогресс-баров.
  • Кастомные кривые позволяют создавать уникальные эффекты, но их стоит применять умеренно, чтобы не нарушать единый стиль интерфейса.

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

Оглавление