Анимация. Часть 1

Angular имеет свой собственный механизм реализации анимаций, в основе которого лежит стандарт Web Animations API.

В случае если стандарт не поддерживается браузером, анимирование будет реализована с использованием CSS фреймов (keyframes).

За Angular анимацию отвечает модуль BrowserAnimationsModule.

Анимации определяются прямо в @Component() и состоят из множества сменяющих друг друга состояний конкретного элемента. Описания состояний объединяются в триггер, который и является полноценной Angular animation. Рассмотрим пример.

example-panel.component.ts

@Component({
  selector: 'example-panel',
  templateUrl: './example-panel.component.html',
  animations: [
    trigger('expandedPanel', [
      state('initial', style({ height: 0 })),
      state('expanded', style({ height: '*' })),
      transition('initial <=> expanded', animate('0.3s')),
    ]),
  ],
})
export class ExamplePanelComponent {
  isExpanded: boolean = false
  state: string = 'initial'

  expand() {
    this.isExpanded = !this.isExpanded
    this.state = this.isExpanded ? 'expanded' : 'initial'
  }
}

example-panel.component.html

<div class="panel">
  <div class="header">
    <p (click)="expand()">Toggle panel</p>
  </div>

  <div class="content" [@expandedPanel]="state">
    <h1>Title</h1>

    <p>Expanded panel</p>
  </div>
</div>

Триггер определяется функцией trigger(), принимающей два аргумента - имя анимации и массив с определением состояний и описанием их смены.

Состояние описывается функцией state(). В качестве параметров ей передаются название состояния и набор CSS-стилей, задаваемых функцией style().

В представлении активация анимации контролируется специальным атрибутом (имя триггера с префиксом @, заключенное в квадратные скобки). В качестве значения атрибуту передается название одного из определенных для анимации состояний. Angular animation срабатывает, если описана пара состояний "было" => "стало"

Для указания всех состояний используйте *. Например, если анимация должна срабатывать при переходе с initial на любое другое состояние, то это указывается так:

transition('initial => *', animate('0.3s'))

Анимирование смены всех состояний:

transition('* => *', animate('0.3s'))

Еще имеется особое состояние void. Оно используется для обозначения элементов, которых еще нет в представлении. Частое использование void - анимированное появление/исчезновение элемента совместно с *ngIf.

<div @animationTriggerName *ngIf="isVisible">
  <h1>Welcome to webdraftt.com!</h1>
</div>

trigger('animationTriggerName', [
  transition('void => *', [
    style({ opacity: 0 }),
    animate('1.2s', style({ opacity: 1 })),
  ]),
  transition('* => void', [
    animate('1.2s', style({ opacity: 0 })),
  ]),
])

Определение переходов void => * и * => void имеют краткие альтернативные варианты записи:

trigger('animationTriggerName', [
  transition(':enter', [
    // code
  ]),
  transition(':leave', [
    // code
  ]),
])

Задание стилей для * и void можно производить прямо в функции transition().

Также * может использоваться в функции style() для задания значения ширины или высоты, которая неизвестна до момента работы приложения. Это случается, если, например, размеры элемента зависят от размеров родительского элемента.

state('expanded', style({ height: '*' }))

Функция transition() является аналогом одноименного CSS-свойства и описывает при смене с какого на какое состояние должна срабатывать анимация. Первый параметр - строка с указанием изменяемых состояний, второй - параметры и (или) стили анимации, указываемые функциями animate() или style().

Если Angular анимация должна отрабатывать для двух состояний в обе стороны (например, с on на off и с off на on), можно использовать краткую запись:

transition('initial <=> expanded', animate('0.3s'))

Функция animate() принимает строку с тремя параметрами:

• длительность анимации;
• время задержки перед стартом анимации;
• easing.

Первые два параметра указываются в миллисекундах.

Для определения Angular animation, которая в процессе смены состояний должна применять промежуточные стили, используется функция keyframes(), принимающая массив промежуточных стилей, определенных с помощью style().

animate(
  '1.25s',
  keyframes([
    style({ fontSize: '12px', offset: 0 }),
    style({ fontSize: '18px', offset: 0.67 }),
    style({ fontSize: '16px', offset: 1 }),
  ])
)

Параметр offset указывает, в рамках какого интервала анимации применяется промежуточный стиль.

В примере выше анимация длится 1.25 с, значение offset для второго набора стилей - 0.67. Значит, первый промежуточный стиль будет действовать 837,5 мс (1250мс * 0.67). Полная длительность анимации принимается за 1.

Для полного контроля Angular анимации у триггера предусмотрено два события start() и done(), которые срабатывают при старте и окончании анимации соответственно.

<div
  [@animateName]="currentState"
  (@animateName.start)="whenAnimate($event)"
  (@animateName.done)="whenAnimate($event)"
>
  <h1>Welcome to webdraftt.com!</h1>
</div>

whenAnimate(event){
    console.log(event);
}

Функции, определенные для этих событий, в качестве аргумента получают объект типа AnimationEvent, который содержит следующие свойства:

• fromState - исходное состояние;
• toState - состояние, на которое происходит смена;
• totalTime - длительность анимации.

Ссылки

• Introduction to Angular animations

Комментарии