简介
动画是你的网站的一个重要组成部分。它可以帮助我们提高用户体验，也可以在需要的地方唤起用户的注意。动画是通过随时间变化的样式来创建的，其时间可以由你控制。在这篇博客中，我将介绍Angular动画的基础知识和一个例子，以便更好地理解这个概念。
Angular中的动画
动画可以帮助你做一个漂亮的网页设计。如果你定义了结构良好的动画，你可以在你的网站上吸引用户。一个动画可以被定义为从一个状态到另一个状态的过渡。angular的动画系统是建立在CSS功能之上的。在angular中，我们定义了不同的状态。对于每个状态，定义样式，然后我们在这些状态之间切换以创建动画效果。这就是Angular中动画的基本理念。
Angular动画中的状态
Angular提供了三种状态，列举如下：
- 空白：这是元素尚未成为DOM的一部分或从DOM中移除的状态。
- 通配符(*)：这是该元素的默认状态。
- 自定义：这种状态需要明确定义，我们可以使用任何名称。
Angular动画中的函数
现在，这里有一些用于创建动画的重要函数：
- 状态:这个函数接受一个自定义的状态名称和它的特定样式。
- 触发器:这个函数包括一个状态和转换的数组。
- 样式:它包括所有将被应用于特定状态的CSS样式。
- 过渡:这个函数接受两个状态，我们要在它们之间进行转换。
- Animate（动画）：这个函数定义了过渡状态的长度和过渡的缓和。
现在，当你对所有的函数有了一个概述，我们可以在一个例子的帮助下更好地理解它们。
前提条件
首先，使用CLI命令创建一个Angular项目
ng new animationsDemo
现在在你喜欢的编辑器中打开该项目，目录结构是这样的。
为了在你的Angular项目中使用动画，我们需要在模块文件（app.module.ts）的进口数组中导入BrowserAnimationsModule。
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
]
现在我们移到我们要使用的组件中，并添加以下代码。
import {
trigger,
state,
style,
animate,
transition,
// ...
} from '@angular/animations';
为了使用这些，我们正在导入它们。
在@Component装饰器中，我们一般有三个东西。但是对于动画，我们要添加一个这样的东西。
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
animations: [
// animation triggers go here
]
})
演示例子
首先，让我们创建一个简单的组件，我们将在其中应用一些转场。这里是app.component.html文件
<div class="container">
<h3 class="mt-3">Animations Demo in Angular</h3>
<div class="item1">
</div>
<button type="button" class="btn btn-primary mt-3">Click me</button>
</div>
现在让我们来定义动画。我们将定义一个简单的动画，在app.component.ts文件中，我们将改变div的大小和颜色，同时从一个状态移动到另一个状态。
animations: [
trigger('changeDivStyle', [
state('start', style({
width: '150px',
height:'100px',
background:'blue',
transform:'translateX(0)'
})),
state('end', style({
width: '300px',
height:'150px',
background:'green',
transform:'translateX(50%)'
})),
transition('start<=>end', animate('1500ms'))
]),
]
在这里我们可以看到我们已经定义了两个状态，开始和结束。你可以给它起任何名字。对于每个状态，我们都定义了一些CSS。你可以在style()中使用所有的CSS属性。由于我们将在水平方向上移动div，我使用了transform属性。
在定义了状态之后，我们设置了过渡时间。这里我们将其设置为1500ms，也就是1.5秒。你可以根据你的需要改变这个速度。箭头<=>表示从开始到结束或从结束到开始的状态转换将需要1.5秒。如果你想单独定义，你可以这样做。
transition('start=>end', animate('1500ms')),
transition('end=>start', animate('2000ms'))
现在，像这样在类中设置初始状态，这样CSS就会应用于该div的起始状态。
export class AppComponent {
title = 'AnimationsDemo';
initialState='start';
}
现在要应用这个，我们需要在我们想要的HTML元素上使用带'@'的触发器名称。
<div [@triggerName]="expression">...</div>;
这里的表达式就是我们想要的初始状态。
在div元素中做如下修改
<div class="item1" [@changeDivStyle]=initialState>
我们将在点击按钮时触发动画，所以在按钮上做如下修改。
<button type="button" class="btn btn-primary mt-3" (click)="toggleState()">Click me</button>
这里我们要调用一个函数toggleState，它将改变动画的状态。所以，现在让我们在ts文件中定义这个函数。
toggleState() {
this.initialState = this.initialState === 'start' ? 'end' : 'start';
}
在这里，我们将检查当前状态是否为 "开始"，然后将其改为 "结束"，否则将回到 "开始 "状态。
现在你已经准备好运行你的项目，你会看到动画在工作。
总结
到目前为止，我们已经学会了创建动画所需的所有功能，以及如何触发这些动画。这只是一个基本的例子，涵盖了Angular中的动画概念。你也可以创建复杂的动画。
