Angular 动画

ngAnimate 的作用是什么？

ngAnimate 模块添加和移除类。

ngAnimate 模块不会为您的人机交互界面元素添加动画。但是，当 ngAnimate 检测到特定事件（例如隐藏或显示人机交互界面元素）时，该元素会获得一些预定义的类，可用于创建动画。

AngularJS 中用于添加/移除类的指令有：

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

ng-show 和 ng-hide 指令添加或移除 ng-hide 类值。

其他指令在进入 DOM 时添加 ng-enter 类值，在从 DOM 移除时添加 ng-leave 属性。

ng-repeat 指令在人机交互界面元素改变位置时也会添加 ng-move 类值。

此外，在动画期间，人机交互界面元素将具有一组类值，动画结束后会移除这些类值。

例如，ng-hide 指令将连接以下类值：

• ng-animate
• ng-hide-animate
• ng-hide-add (如果元素将被隐藏)
• ng-hide-remove (如果元素将被显示)
• ng-hide-add-active (如果元素将被隐藏)
• ng-hide-remove-active (如果元素将被显示)

使用 CSS 进行动画

我们可以使用 CSS 过渡或 CSS 动画来为人机交互界面元素添加动画。本教程将向您展示两者。

CSS 过渡

CSS 过渡允许您在给定持续时间内，平滑地将 CSS 属性值从一个值更改为另一个值。

示例

当 DIV 元素获得 .ng-hide 类时，过渡将持续 0.5 秒，高度将从 100px 平滑地变为 0。

CSS 动画

CSS 动画允许您在给定时间内，轻松地将 CSS 属性值从一个值更改为另一个值。

示例

当 DIV 元素接收到 .ng-hide 类时，myChange 动画将运行，这将简单地将高度从 100px 变为 0。

Angular 中主要的动画模块是 @angular/animations 和 @angular/platform-browser。当您使用 CLI 创建新项目时，这些依赖项会自动添加到您的项目中。

要开始为项目添加 Angular 动画，请导入特定于动画的模块以及标准的 Angular 功能。

步骤 1：启用动画模块

导入 BrowserAnimationsModule，它将动画功能引入您的 Angular 根应用程序模块。

注意：当您使用 CLI 创建应用程序时，根应用程序模块 app.module.ts 位于 src/app 文件夹中。

步骤 2：将动画函数导入组件文件

如果您计划在组件文件中使用特定的动画函数，请从 @angular/animations 导入这些函数。

src/app/app.component.ts

步骤 3：添加动画元数据属性

在组件文件中，在装饰器内添加一个名为 animation: @Component() 的元数据属性。您将定义动画的触发器放置在 AnimationMetadata 属性中。

动画化过渡

让我们动画化一个将人机交互界面元素从一种状态更改为另一种状态的过渡。例如，您可以根据用户上次的操作来指定按钮是展开还是收起。当按钮处于展开状态时，它是可见的且为黄色。当它处于收起状态时，它是半透明的且为蓝色。

在 HTML 中，这些属性使用常见的 CSS 样式（如 color 和 opacity）进行设置。在 Angular 中，使用 style() 函数为动画指定一组 CSS 样式。收集一组样式到一个动画状态中，并为该状态命名，例如 open 或 closed。

让我们创建一个新的 open-close 组件来用简单的过渡动画化。

在终端中运行以下命令来生成该组件：

它将在 src/app/open-close.component.ts 创建该组件。

动画状态和样式

使用 Angular 的 position() 函数来定义将在每个过渡结束时调用的不同状态。此函数接受两个参数：一个唯一名称（如 open 或 closed）和一个 style() 函数。

使用 style() 函数定义与给定状态名称关联的一组样式。最好为包含连字符的样式属性（如 background color）使用 CamelCase，或者用引号将其括起来，例如 'background color'。

让我们看看 Angular 的 state() 函数如何与 style?¬ (?) 函数一起设置 CSS 样式属性。在此代码片段中，多个样式属性同时为状态设置。在 open 状态下，按钮具有 200 像素的高度，1 的不透明度，以及黄色的背景。

src/app/open-close.component.ts

在以下 closed 状态下，按钮具有 100 像素的高度，0.8 的不透明度，以及蓝色的背景。

过渡和计时

在 Angular 中，您可以设置多个样式而没有任何动画。但是，如果不进一步细化，按钮会立即打开，没有任何淡入、收缩或任何其他可见的更改指示。

为了使更改不那么 abrupt，您需要定义一个动画过渡来指定在一个时间点上，一个状态到另一个状态之间发生的更改。transition() 函数接受两个参数：第一个参数接受一个定义两个过渡状态之间方向的表达式，第二个参数接受一个或一系列 animate() 步骤。

使用 animate() 函数定义长度、延迟和流畅度，并使用 style() 函数定义过渡发生时的样式。使用 animate() 函数为多阶段动画定义 keyframes()。这些定义放置在 animate() 函数的第二个参数中。

动画元数据：持续时间、延迟和缓动

animate() 函数（transition 函数的第二个参数）接受输入参数的计时和样式。

timings 参数接受一个数字或一个定义为三部分的字符串。

第一部分，period，是必需的。持续时间可以表示为不带引号的毫秒数，或带引号的秒数，并作为时间说明符。例如，零点一秒的持续时间可以表示如下：

• 作为普通数字，以毫秒为单位：100
• 以字符串形式，以毫秒为单位：'100ms.'
• 以字符串形式，以秒为单位：'0.1s.'

第二个参数 delay，具有与 duration 相同的语法。例如：

• 等待 100ms，然后运行 200ms：'0.2s 100ms'。

第三个参数 easing，控制动画在其运行期间如何加速和减速。

例如，easing 会导致动画缓慢开始，并在进行过程中加速。

• 等待 100ms，运行 200ms。使用减速曲线，快速开始，然后逐渐停止：'0.2s out of 100ms smoothly'
• 运行长达 200ms，无延迟。使用标准曲线，缓慢开始，中间加速，然后逐渐减慢直到结束：'0.2s eas-in-out'
• 快速开始，运行长达 200ms。使用加速曲线，缓慢开始，并以全速结束：'0.2s Easy-in'。

注意：有关自然缓动曲线的一般信息，请参阅 Material Design 网站上的缓动曲线主题。

此示例提供了从 open 到 closed 的状态转换，状态之间的过渡时间为 1 秒。

src/app/open-close.component.ts

在前一个代码片段中，=> 操作符表示单向过渡，而 <=> 是双向的。在过渡中，animate() 指定过渡所需的时间。在这种情况下，从 open 到 closed 的状态更改需要 1 秒，在此表示为 1s。

此示例添加了从 closed 状态到 open 状态的状态过渡，过渡动画弧为 0.5 秒。

src/app/open-close.component.ts

注意：有关在 state 和 transition 函数中使用样式的其他一些说明。

• 使用 state () 定义在每个过渡结束时应用的样式；它们在动画完成后仍然存在。
• 使用 transition () 定义中间样式，这些样式在动画期间产生运动的错觉。
• 当动画禁用时，可以跳过 transition () 样式，但 state () 样式不能。

在一个 transition () 参数中包含多个状态对

transition( 'on => off, off => void' ).

触发动画

动画需要一个触发器，以便它知道何时开始。trigger() 函数收集状态和过渡，并为动画命名，以便您可以将其附加到 HTML 模板中的触发元素。

trigger() 函数描述了要监视变化的属性的名称。当发生变化时，触发器会启动其定义中包含的操作。这些操作可以是过渡或其他操作，我们稍后将看到。

在此示例中，我们将触发器命名为 open-close，并将其附加到按钮元素。该触发器描述了 open 和 closed 状态以及两个过渡的计时。

注意：在每个 trigger() 函数调用中，一个元素在任何时候只能处于一个位置。但是，可以同时激活多个触发器。

定义动画并将其附加到 HTML 模板

动画在组件的元数据中定义，该元数据控制要动画化的人机交互界面元素。将定义动画的代码放在装饰器内的 animation: 属性 @Component() 下。

src/app/open-close.component.ts

当您为组件定义了动画触发器后，请将其附加到该组件模板中的元素上，方法是将触发器名称括在括号中，并在其旁边加上 @ 符号。然后，您可以使用标准的 Angular 属性绑定语法将触发器绑定到模板表达式，如下所示，其中 triggerName 是触发器的名称，而 expression 计算为一个已定义的动画状态。

当表达式值更改为新状态时，将执行或触发动画。

以下代码片段将触发器绑定到 isOpen 属性的值。

src/app/open-close.component.html

在此示例中，当 isOpen 表达式评估为已定义的 open 或 closed 状态时，它会通知 open-closed 触发器状态的更改。然后，由 open-close 代码来处理状态更改并启动状态更改动画。

您可以为进入或离开页面（插入或从 DOM 移除）的元素创建条件动画。例如，在 HTML 模板中使用 *ngIf 和动画触发器。

注意：在组件文件中，将定义动画的触发器设置为装饰器中 animation:@Component() 属性的值。

在 HTML 模板文件中，使用触发器名称将已定义的动画附加到要动画化的人机交互界面元素上。

代码审查

这是过渡示例中讨论的代码文件。

• src/app/open-close.component.ts
• src/app/open-close.component.html
• src/app/open-close.component.css

您学习了如何使用 animate() 以及 style() 和 state() 进行计时，为两个状态之间的过渡添加动画。

在 Angular Animation 部分了解更多高级功能，从过渡和触发器的进阶技巧开始。

动画 API 摘要

@angular/animations 模块提供的函数式 API 提供了一个领域特定语言 (DSL)，用于在 Angular 应用程序中创建和控制动画。有关主要函数以及相关数据结构和语法详细信息的完整列表，请参阅 API 参考。