Введение в анимацию Angular¶

28.02.2022

Анимация создает иллюзию движения: Элементы HTML меняют стиль с течением времени. Хорошо продуманные анимации могут сделать ваше приложение более интересным и простым в использовании, но они не только косметические.

Анимация может улучшить работу приложения и пользовательский опыт несколькими способами:

• Без анимации переходы между веб-страницами могут казаться резкими и отрывистыми.
• Движение значительно улучшает пользовательский опыт, поэтому анимация дает пользователям возможность определить реакцию приложения на их действия
• Хорошая анимация интуитивно привлекает внимание пользователя к тому, что ему необходимо.

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

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

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

W3C поддерживает список анимируемых свойств на своей странице CSS Transitions.

Об этом руководстве¶

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

Функции, описанные в этом руководстве — и более продвинутые функции, описанные в соответствующих руководствах по анимации Angular — демонстрируются в примере приложения.

Предварительные условия¶

Руководство предполагает, что вы знакомы с созданием базовых приложений Angular, как описано в следующих разделах:

• Учебник
• Обзор архитектуры

Начало работы¶

Основными модулями Angular для анимации являются @angular/animations и @angular/platform-browser. Когда вы создаете новый проект с помощью CLI, эти зависимости автоматически добавляются в ваш проект.

Чтобы начать добавлять анимации Angular в свой проект, импортируйте модули, специфичные для анимации, вместе со стандартной функциональностью Angular.

Шаг 1: Включение модуля анимации¶

Импортируйте BrowserAnimationsModule, который внедряет возможности анимации в ваш корневой модуль приложения Angular.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule],
    declarations: [],
    bootstrap: [],
})
export class AppModule {}

Шаг 2: Импорт функций анимации в файлы компонентов¶

Если вы планируете использовать определенные функции анимации в файлах компонентов, импортируйте эти функции из @angular/animations.

1
2
3
4
5
6
7
8
9

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

Шаг 3: Добавление свойства метаданных анимации¶

В файле компонента добавьте свойство метаданных animations: в декораторе @Component(). В свойство метаданных animations помещается триггер, определяющий анимацию.

1
2
3
4
5
6
7
8

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    animations: [
        // animation triggers go here
    ]
})

Анимация перехода¶

Давайте анимируем переход, который переводит один HTML-элемент из одного состояния в другое. Например, вы можете указать, что кнопка отображает либо Открыто, либо Закрыто в зависимости от последнего действия пользователя.

Когда кнопка находится в состоянии открыто, она видна и имеет желтый цвет.

Когда она находится в состоянии закрыта, она прозрачная и синяя.

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

Соберите набор стилей в состояние анимации и дайте этому состоянию имя, например открыто или закрыто.

1

ng g component open-close

Состояние и стили анимации¶

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

Уникальное имя, например open или close, и функцию style().

Используйте функцию style() для определения набора стилей, которые будут ассоциироваться с данным именем состояния. Вы должны использовать camelCase для атрибутов стиля, которые содержат тире, например backgroundColor, или обернуть их в кавычки, например 'background-color'.

Давайте посмотрим, как функция Angular state() работает с функцией style() для установки стилевых атрибутов CSS. В этом фрагменте кода для состояния одновременно устанавливается несколько атрибутов стиля.

В состоянии open кнопка имеет высоту 200 пикселей, непрозрачность 1 и желтый цвет фона.

1
2
3
4
5
6

// ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),

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

1
2
3
4
5

state('closed', style({
  height: '100px',
  opacity: 0.8,
  backgroundColor: 'blue'
})),

Переходы и синхронизация¶

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

Чтобы сделать изменение менее резким, необходимо определить анимацию transition, чтобы указать изменения, которые происходят между одним состоянием и другим в течение определенного периода времени. Функция transition() принимает два аргумента:

Первый аргумент принимает выражение, определяющее направление между двумя состояниями перехода, а второй аргумент принимает один или серию шагов animate().

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

Эти определения помещаются во второй аргумент функции animate().

Метаданные анимации: duration, delay и easing¶

Функция animate() (второй аргумент функции перехода) принимает входные параметры timings и styles.

Параметр timings принимает либо число, либо строку, состоящую из трех частей.

1

animate (duration)

или

1

animate ('duration delay easing')

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

• В виде простого числа в миллисекундах: 100
• В строке, в миллисекундах: 100ms.
• В строке в виде секунд: '0.1s'

Второй аргумент, delay, имеет тот же синтаксис, что и duration. Например:

• Подождать 100 мс, а затем выполнить 200 мс: 0.2s 100ms.

Третий аргумент, easing, управляет тем, как анимация ускоряется и замедляется во время выполнения. Например, ease-in заставляет анимацию начинаться медленно и набирать скорость по мере выполнения.

• Подождите 100 мс, запустите 200 мс.

  Используйте кривую замедления, чтобы начать быстро и медленно замедляться до точки покоя:

  '0.2s 100ms ease-out'

• Запуск в течение 200 мс без задержки.

  Используйте стандартную кривую, чтобы начать медленно, ускориться в середине, а затем медленно замедлиться в конце:

  '0.2s ease-in-out'

• Запуск сразу, выполнение в течение 200 мс.

  Используйте кривую ускорения, чтобы начать медленно и закончить на полной скорости:

  '0.2s ease-in'

Этот пример обеспечивает переход из состояния open в closed с переходом между состояниями в течение 1 секунды.

1
2
3

transition('open => closed', [
  animate('1s')
]),

В предыдущем фрагменте кода оператор => обозначает однонаправленные переходы, а <=> — двунаправленные. Внутри перехода оператор animate() указывает, как долго длится переход.

В данном случае переход из состояния open в closed занимает 1 секунду, выраженную здесь как 1s.

Этот пример добавляет переход состояния из состояния closed в состояние open с дугой анимации перехода 0,5 секунды.

1
2
3

transition('closed => open', [
  animate('0.5s')
]),

Запуск анимации¶

Анимация требует триггера, чтобы она знала, когда начинать. Функция trigger() собирает состояния и переходы и дает анимации имя, чтобы вы могли прикрепить его к запускающему элементу в шаблоне HTML.

Функция trigger() описывает имя свойства, которое нужно отслеживать на предмет изменений. Когда происходит изменение, триггер инициирует действия, указанные в его определении.

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

В этом примере мы назовем триггер openClose и прикрепим его к элементу button. Триггер описывает открытое и закрытое состояния, а также тайминги для этих двух переходов.

В рамках каждого вызова функции trigger() элемент может находиться только в одном состоянии в любой момент времени. Однако возможно одновременное действие нескольких триггеров.

Определение анимаций и прикрепление их к шаблону HTML¶

Анимации определяются в метаданных компонента, который управляет анимируемым элементом HTML. Поместите код, определяющий анимацию, в свойство animations: в декораторе @Component().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

@Component({
    selector: 'app-open-close',
    animations: [
        trigger('openClose', [
            // ...
            state(
                'open',
                style({
                    height: '200px',
                    opacity: 1,
                    backgroundColor: 'yellow',
                })
            ),
            state(
                'closed',
                style({
                    height: '100px',
                    opacity: 0.8,
                    backgroundColor: 'blue',
                })
            ),
            transition('open => closed', [animate('1s')]),
            transition('closed => open', [animate('0.5s')]),
        ]),
    ],
    templateUrl: 'open-close.component.html',
    styleUrls: ['open-close.component.css'],
})
export class OpenCloseComponent {
    isOpen = true;

    toggle() {
        this.isOpen = !this.isOpen;
    }
}

Когда вы определили триггер анимации для компонента, прикрепите его к элементу шаблона этого компонента, заключив имя триггера в скобки и предваряя его символом @. Затем вы можете привязать триггер к выражению шаблона, используя стандартный синтаксис привязки свойств Angular, как показано ниже, где triggerName — это имя триггера, а expression оценивает определенное состояние анимации.

1

<div [@triggerName]="expression">…</div>;

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

Следующий фрагмент кода связывает триггер со значением свойства isOpen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<nav>
    <button type="button" (click)="toggle()">
        Toggle Open/Close
    </button>
</nav>

<div
    [@openClose]="isOpen ? 'open' : 'closed'"
    class="open-close-container"
>
    <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

В этом примере, когда выражение isOpen оценивает определенное состояние открыто или закрыто, оно уведомляет триггер openClose об изменении состояния. Затем код openClose обрабатывает изменение состояния и запускает анимацию изменения состояния.

Для элементов, входящих или выходящих со страницы (вставляемых или удаляемых из DOM), вы можете сделать анимацию условной. Например, используйте *ngIf с триггером анимации в шаблоне HTML.

Обзор кода¶

Вот файлы кода, рассмотренные в примере перехода.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

@Component({
    selector: 'app-open-close',
    animations: [
        trigger('openClose', [
            // ...
            state(
                'open',
                style({
                    height: '200px',
                    opacity: 1,
                    backgroundColor: 'yellow',
                })
            ),
            state(
                'closed',
                style({
                    height: '100px',
                    opacity: 0.8,
                    backgroundColor: 'blue',
                })
            ),
            transition('open => closed', [animate('1s')]),
            transition('closed => open', [animate('0.5s')]),
        ]),
    ],
    templateUrl: 'open-close.component.html',
    styleUrls: ['open-close.component.css'],
})
export class OpenCloseComponent {
    isOpen = true;

    toggle() {
        this.isOpen = !this.isOpen;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<nav>
    <button type="button" (click)="toggle()">
        Toggle Open/Close
    </button>
</nav>

<div
    [@openClose]="isOpen ? 'open' : 'closed'"
    class="open-close-container"
>
    <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

:host {
    display: block;
    margin-top: 1rem;
}

.open-close-container {
    border: 1px solid #dddddd;
    margin-top: 1em;
    padding: 20px 20px 0px 20px;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
}

Резюме¶

Вы научились добавлять анимацию к переходу между двумя состояниями, используя style() и state() вместе с animate() для синхронизации.

Узнайте о более продвинутых возможностях анимации в Angular в разделе Анимация, начиная с продвинутых техник в transition and triggers.

Краткое описание API анимации¶

Функциональный API, предоставляемый модулем @angular/animations, обеспечивает специфический язык (DSL) для создания и управления анимацией в приложениях Angular. Полный список и синтаксические подробности основных функций и связанных с ними структур данных см. в API reference.

Больше об анимации в Angular¶

Вам также может быть интересно следующее:

• Переходы и триггеры
• Сложные анимационные последовательности
• Многоразовые анимации
• Анимации перехода по маршруту

Комментарии