原文地址：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