Анимация. Часть 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

Комментарии