angular中的animation动画
原文地址：https://blog.csdn.net/xf1195718067/article/details/78724845
为了弄懂angular的动画自己也是花了一番功夫，不客观的说，angular的动画写起来是比较复杂的，但又必须掌握。
下面是我结合官方文档的资料，自己通过实践写出来的一篇博客，希望可以帮到有需求的小伙伴，当然，如果文章有地方写的错误，欢迎指正。
好了，废话不多说，开始正文吧。
1：angular动画的使用需要先引入一些与动画有关的函数。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
1
2
3
组件里引用：（：暂时先在组件里写动画相关的代码，文末会把它单独抽离出来
import { Component } from '@angular/core';
import {trigger, state, style, animate, transition} from '@angular/animations';
1
2
注：有些小伙伴的项目开始的时候可能没有动画相应的资源包，请暂时允许我这么说。此时你就需要在项目依赖包里先加入这个资源。
如何加入呢？定位到你的项目上，命令行输入：
npm install @angular/animations --save
1
当你检查到你的package.json里出现：
此时说明动画资源已经被成功下载了。ok，现在我们开始动画吧：
**：开始第一个动画（交通信号灯..）：
1：请首先在你的组件.ts代码里的@Component装饰器里添加如下代码：
animations: [
trigger('signal', [
state('go', style({
'background-color': 'green'
}))
])
]
1
2
3
4
5
6
7
模板（html）里添加：
<div class="traffic-light" [@signal]="'go'"></div>
1
css里样式：
.traffic-light{ width: 100px; height: 100px; background-color: black; }
1
2
本来div定义的样式背景色是黑色，但是div在页面中却呈现的是绿色，见图：
现在问题来了，绿色怎么来的呢 ? 见图：
因为div元素此时处于动画里的go状态。所以div具有go状态里被描述的动画样式。
如果你不懂为什么要这样定义动画，暂时你只需要知道这样写就行了。
2：让我们加入两个按钮，此时两个按钮要做的是：让div元素切换不同的背景色。
此时可能有的小伙伴会觉得我直接用js写不就好了吗？（下面用原生js仅为提供意思，
btn1.onclick = function(){
div.style.background = 'xxx';
}
btn2.onclick = function(){
div.style.background = 'xxx';
}
1
2
3
4
5
6
7
请先务着急，不妨先看看利用动画是如何制作呢。见模板:图
见ts:图
这个切换div不同背景颜色样式上，实质的就是通过按钮事件切换div的两种动画状态。
3：让我们来点复杂一点的：（： 见图：
这个具备时间过渡的动画的怎么来的呢？我们先见代码：
在ts代码里我只加了三句代码，其中两句是描述状态中高度的变化，相信小伙伴们都懂，着重看看这个 ‘* => *’
问题来了，这个 * = >* 是个什么东西呢？
答：它是一个状态迁移表达式，* 表示任意状态，所以这个表达式告诉我们，只要有状态的变化就会激发后面的动画效果，使得元素做500毫秒的动画。
也可以粗暴的这么讲：*号匹配任意状态，由 transition 关键字定义 何种状态过渡到何种状态。 只要状态发生变化，就会执行 transition 里的anmate函数。
它类似于：
但不同的是，当第一次点击的是stop的按钮时，这么div是没有出现时间过渡的。那是因为go状态在stop之前定义，
先点击stop时，不走transition这条定义。当点了go按钮触发go状态时，stop的过渡才会生效。
4：然后介绍下一个特殊的状态void, 何为void状态呢，我们先添加一段代码，见下图：
我们会看见当页面刷新的时候，div元素从页面上方进入页面。这个动画如何产生的呢？再重复看这两段代码：
会发现，在class里我并没有给signal成员变量赋初始值，这就意味着一开始trigger的状态就是void。
void状态就是描述没有状态值时的状态，我们往往在实现进场或离场动画时需要这个void状态。
当然，void状态也是一种任意状态。所以：
transition('*=> *', animate(500))
//在这里等同于
transition('void => *', animate(500))
1
2
3
4
5
注：void状态的动画只是拿来“过渡”用的，它描述的样式不是最终的样式，而是过渡过程中产生的样式，在规定的时间内完成后它是被“清除掉的”。
所以，这个动画会在我规定的500毫秒里完成一个按Y轴做的-100%的位移。
5：当你看到，transition里的animate时会不会觉得似曾相识呢？没错，它和css3里的animation几乎是一样的
所以当然我们可以使用延迟，缓动函数，关键帧等来定义我们的动画：
我们来见一个详细的例子。
模板:
<div class="traffic-light" [@signal]="signal"></div>
<button (click)="go()">go</button>
<button (click)="stop()">stop</button>
ts:
1
2
3
4
5
import { Component } from '@angular/core';
import {trigger, state, style, animate, transition,keyframes} from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('signal', [
state('void', style({
'transform':'translateX(-100%)'
})),
state('go', style({
'background-color': 'green',
'height':'100px'
})),
state('stop', style({
'background-color':'red',
'height':'50px'
})),
transition('void => *', animate(5000, keyframes([
style({'transform': 'scale(0)'}),
style({'transform': 'scale(0.1)'}),
style({'transform': 'scale(0.3)'}),
style({'transform': 'scale(0.6)'}),
style({'transform': 'scale(0.8)'}),
style({'transform': 'scale(1)'})
]))),
transition('* => *', animate('.5s 1s cubic-bezier(0.2, 0.8, 0.3, 1.8)'))
])
]
})
export class AppComponent {
signal:string;
stop(){
this.signal = 'stop';
}
go(){
this.signal = 'go';
}
}
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
36
37
38
39
40
41
42
43
这个动画是怎么产生的呢？
先见
在这个transition定义里，动画共持续了五秒，对应的是每一个style,共分为：0s，1s，2s，3s，4s和5s
也就是当浏览器刷新时，入场动画 void=>*的过程。
**我们有看见当我点击go or stop按钮时，按钮等待了一点时间才执行动画，是怎么回事呢？我们看这个transition的定义：
transition('* => *', animate('.5s 1s cubic-bezier(0.2, 0.8, 0.3, 1.8)'))
1
这个状态定义表示任意状态到任意状态的过程，也就是我们点击按钮div当前的状态到go or stop的状态，表现为动画1秒延迟后div以0.5秒的时间完成这个动画。
这种在组件里写动画的方式是不够优雅的，我们可以把这个动画单独提取出来，如何提取呢？
1：新创建一个动画的ts文件，如animate.ts:
import {trigger, state, style, animate, transition,keyframes} from '@angular/animations';
export const SingalAnimate = trigger('signal', [
state('void', style({
'transform':'translateX(-100%)'
})),
state('go', style({
'background-color': 'green',
'height':'100px'
})),
state('stop', style({
'background-color':'red',
'height':'50px'
})),
transition('void => *', animate(5000, keyframes([
style({'transform': 'scale(0)'}),
style({'transform': 'scale(0.1)'}),
style({'transform': 'scale(0.3)'}),
style({'transform': 'scale(0.6)'}),
style({'transform': 'scale(0.8)'}),
style({'transform': 'scale(1)'})
]))),
transition('* => *', animate('.5s 1s cubic-bezier(0.2, 0.8, 0.3, 1.8)'))
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2：而后，在组件ts里引入：
import { SingalAnimate } from './animate';
1
3：最后，在元数据animation 里添加：
animations: [ SingalAnimate ]
1
npm start, 看看效果吧~
————————————————
版权声明：本文为CSDN博主「fier-liu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xf1195718067/article/details/78724845