使用Angular 6創(chuàng)建各種動(dòng)畫效果的方法

就技術(shù)角度而言，動(dòng)畫可以被定義為從初始狀態(tài)到最終狀態(tài)的轉(zhuǎn)換過程。如今它已是各種Web應(yīng)用不可或缺的組成部分。通過動(dòng)畫，我們不僅能創(chuàng)建出各種酷炫的UI，同時(shí)它們也能增加應(yīng)用程序的趣味性。因此，設(shè)計(jì)精美的動(dòng)畫在吸引用戶眼球的同時(shí)，也增強(qiáng)了他們的瀏覽體驗(yàn)。

Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動(dòng)畫效果。在此，我們將使用Visual Studio Code來進(jìn)行示例演示。

準(zhǔn)備工作

安裝Visual Studio Code和Angular CLI。

如果您是新手，請(qǐng)參閱我以前的Angular 6.0入門文章(https://dzone.com/articles/getting-started-with-angular-60)，在自己的機(jī)器上建立出Angular 6開發(fā)環(huán)境。

源代碼

請(qǐng)從GitHub處下載源代碼，地址是：https://github.com/AnkitSharma-007/angular-6-animations。

理解Angular動(dòng)畫的不同狀態(tài)

動(dòng)畫是某個(gè)元素從一種狀態(tài)向另一種狀態(tài)的轉(zhuǎn)變， Angular為單個(gè)元素定義出了三種不同的狀態(tài)。

1. Void狀態(tài)：void狀態(tài)表示某個(gè)元素處于不是DOM一部分的狀態(tài)。當(dāng)一個(gè)元素被創(chuàng)建且尚未放置到DOM中、或者該元素從DOM中移除時(shí)，就處于該狀態(tài)。此狀態(tài)特別實(shí)用，特別是當(dāng)我們想通過添加或刪除DOM中的元素，來創(chuàng)建動(dòng)畫的時(shí)候，我們?cè)诖a中用關(guān)鍵字void來定義這種狀態(tài)。
   
2. Wildcard狀態(tài)：又稱元素的默認(rèn)狀態(tài)。不管當(dāng)前的動(dòng)畫狀態(tài)如何，各種樣式都用這種狀態(tài)來定義元素。我們?cè)诖a中用符號(hào)*來定義這種狀態(tài)。
   
3. Custom狀態(tài)：元素的這種狀態(tài)需要在代碼中被明確定義。我們?cè)诖a中可以使用任何自定義的名稱來表示這種狀態(tài)。

動(dòng)畫轉(zhuǎn)換定時(shí)

我們?cè)谧约旱膽?yīng)用中，通過定義動(dòng)畫轉(zhuǎn)換的定時(shí)，來顯示從一個(gè)狀態(tài)過度到另一個(gè)狀態(tài)。Angular為我們提供了如下三種與時(shí)間相關(guān)的屬性：

1.持續(xù)時(shí)間(Duration)

此屬性表示我們的動(dòng)畫從開始(初始狀態(tài))到完成(最終狀態(tài))所需的時(shí)間。我們可以用以下三種方式來定義動(dòng)畫的持續(xù)時(shí)間：

• 使用一個(gè)整數(shù)值，來表示以毫秒為單位的時(shí)間，例如：500
• 使用一個(gè)字符串值，來表示以毫秒為單位的時(shí)間，例如：'500ms'
• 使用一個(gè)字符串值，來表示以秒為單位的時(shí)間。例如：'0.5'
  

2.延遲(Delay)

此屬性代表動(dòng)畫從觸發(fā)到和實(shí)際轉(zhuǎn)換開始之間的時(shí)間間隔。該屬性遵循與上述持續(xù)時(shí)間相同的語法規(guī)則。要定義延遲，我們需要在持續(xù)時(shí)間值的后面，以字符串的形式添加延遲的數(shù)值，即：'Duration Delay'。例如' 0.3s 500ms'，表示轉(zhuǎn)換將等待500毫秒，然后運(yùn)行0.3秒。

3.滑動(dòng)(Easing)

此屬性表示動(dòng)畫在其執(zhí)行過程中是如何被加速或減速的。我們可以在持續(xù)時(shí)間和延遲的字符串后面，添加第三個(gè)變量。當(dāng)然，如果延遲數(shù)值不存在的話，那么Easing將成為第二個(gè)數(shù)值。這同樣也是一個(gè)可選屬性。例如：

•  '0.3s 500ms ease-in'。這意味著轉(zhuǎn)換將等待500毫秒，然后運(yùn)行0.3秒(300毫秒)，實(shí)現(xiàn)滑入的效果。
•  '300ms ease-out'。這意味著轉(zhuǎn)換將運(yùn)行300毫秒(0.3秒)，實(shí)現(xiàn)滑出的效果。

創(chuàng)建Angular 6應(yīng)用

請(qǐng)?jiān)谀挠?jì)算機(jī)上打開命令提示行，并執(zhí)行以下命令集：

• mkdir ngAnimationDemo
• cd ngAnimationDemo
• ng new ngAnimation

這些命令將創(chuàng)建一個(gè)名為ngAnimationDemo的目錄，然后在該目錄內(nèi)創(chuàng)建一個(gè)名為ngAnimation的Angular應(yīng)用。

請(qǐng)使用Visual Studio Code打開ngAnimation應(yīng)用。接著我們將創(chuàng)建自己的組件。

請(qǐng)依次進(jìn)入View >> Integrated Terminal，這將打開Visual Studio Code的終端窗口。

請(qǐng)執(zhí)行以下命令，以創(chuàng)建相應(yīng)的組件：

ng g c animationdemo

它將在/src/app文件夾內(nèi)創(chuàng)建我們的組件--animationdemo。

為了用到Angular動(dòng)畫，我們需要在應(yīng)用中導(dǎo)入特定的動(dòng)畫模塊--BrowserAnimationsModule。請(qǐng)打開app.module.ts文件，并添加如下的導(dǎo)入定義：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
// other import definitions 
@NgModule({ imports: [BrowserAnimationsModule // other imports]})

理解Angular動(dòng)畫的語法

下面，我們?cè)诮M件的元數(shù)據(jù)中編寫動(dòng)畫代碼。其語法如下：

@Component({ 
// other component properties. 
 animations: [ 
 trigger('triggerName'), [ 
 state('stateName', style()) 
 transition('stateChangeExpression', [Animation Steps]) 
 ] 
 ] 
})

此處，我們用到了名為animations的屬性。該屬性的輸入是一個(gè)陣列，此陣列包含一個(gè)或多個(gè)“觸發(fā)器”。同時(shí)，每個(gè)觸發(fā)器都帶有唯一的名稱、和用來定義動(dòng)畫的狀態(tài)和各種轉(zhuǎn)換的具體實(shí)現(xiàn)。

另外，每一個(gè)狀態(tài)函數(shù)都會(huì)通過“stateName”來唯一地識(shí)別其狀態(tài)、并用樣式函數(shù)來顯示在該狀態(tài)下的元素樣式。

當(dāng)然，每個(gè)轉(zhuǎn)換函數(shù)也都通過stateChangeExpression，來定義元素狀態(tài)轉(zhuǎn)換、并定義動(dòng)畫的不同步驟所對(duì)應(yīng)的陣列，從而能夠顯示出轉(zhuǎn)換是如何發(fā)生的。在此，我們就可以用逗號(hào)分隔的數(shù)值，來將多個(gè)觸發(fā)器函數(shù)包括到動(dòng)畫的屬性之中。

由于這些功能(觸發(fā)、狀態(tài)、和轉(zhuǎn)換)都被定義在@angular/animations模塊之中，因此，我們需要在自己的組件導(dǎo)入該模塊。

為了將動(dòng)畫應(yīng)用到某個(gè)元素之上，我們需要在元素的定義中包含觸發(fā)器的名稱，即：在元素的標(biāo)簽里使用@后面加觸發(fā)器名稱的格式。對(duì)應(yīng)的代碼示例如下：

<div @changeSize></div> 

這是將觸發(fā)器changeSize應(yīng)用到元素的上。

下面，讓我們創(chuàng)建更多的動(dòng)畫，以更好地理解Angular的動(dòng)畫概念吧。

更改大小的動(dòng)畫

我們將創(chuàng)建一個(gè)動(dòng)畫，來實(shí)現(xiàn)一鍵改變的大小。

請(qǐng)打開animationdemo.component.ts文件，將如下代碼添加到導(dǎo)入定義之中。

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

在組件的元數(shù)據(jù)中添加如下的動(dòng)畫屬性定義。

animations: [ 
 trigger('changeDivSize', [ 
 state('initial', style({ 
 backgroundColor: 'green', 
 width: '100px', 
 height: '100px' 
 })), 
 state('final', style({ 
 backgroundColor: 'red', 
 width: '200px', 
 height: '200px' 
 })), 
 transition('initial=>final', animate('1500ms')), 
 transition('final=>initial', animate('1000ms')) 
 ]), 
] 

在此，我們定義了一個(gè)觸發(fā)器—changeDivSize，而且該觸發(fā)器里的兩個(gè)功能函數(shù)。該元素在“初始”狀態(tài)時(shí)呈現(xiàn)綠色，并隨著寬度和高度的增加，在“最終”狀態(tài)時(shí)呈現(xiàn)為紅色。

同時(shí)，我們定義了狀態(tài)的轉(zhuǎn)換規(guī)則：從“初始”態(tài)到“最終”態(tài)將持續(xù)1500毫秒，而從“最終”態(tài)返回“初始”態(tài)則為1000毫秒。

為了改變?cè)氐臓顟B(tài)，我們?cè)诮M件的類定義中定義了一個(gè)功能函數(shù)。我們將如下代碼包含在AnimationdemoComponent類中：

currentState = 'initial'; 
changeState() { 
 this.currentState = this.currentState === 'initial' ? 'final' : 'initial'; 
} 

此處，我們定義了一個(gè)changeState方法，來切換元素的狀態(tài)。

請(qǐng)打開animationdemo.component.html文件，并添加以下代碼：

<h4>Change the div size</h4> 
<button (click)="changeState()">Change Size</button> 
<br /> 
<div [@changeDivSize]=currentState></div> 
<br />

我們定義了一個(gè)按鈕，來調(diào)用點(diǎn)擊時(shí)的changeState函數(shù)。由于我們前面已經(jīng)定義了元素，并對(duì)它應(yīng)用了changeDivSize動(dòng)畫觸發(fā)器，因此當(dāng)按鈕被點(diǎn)擊時(shí)，它會(huì)更新元素的狀態(tài)，其大小則會(huì)伴隨著轉(zhuǎn)換效果而發(fā)生變化。

在執(zhí)行該應(yīng)用之前，我們也需要將引用包含在app.component.html文件內(nèi)的Animationdemo組件中。

打開app.component.html文件，您會(huì)發(fā)現(xiàn)該文件中已包含了一些默認(rèn)的HTML代碼。請(qǐng)刪除所有的代碼，并按照下圖所示放置組件的選擇器：

<app-animationdemo></app-animationdemo>

請(qǐng)?jiān)赩isual Studio Code的終端窗口里運(yùn)行ng serve命令，以執(zhí)行該代碼。運(yùn)行完畢后，它會(huì)提示您在瀏覽器中打開http://localhost:4200。隨后，您就會(huì)在瀏覽器中看到如下點(diǎn)擊按鈕的動(dòng)畫效果。

氣球動(dòng)畫效果

在前面的動(dòng)畫示例中，轉(zhuǎn)化僅發(fā)生在兩個(gè)方向。而在本節(jié)中，我們將學(xué)習(xí)如何改變所有方向上的尺寸。這與氣球的充、放氣比較類似，故稱為氣球動(dòng)畫效果。

請(qǐng)?jiān)趧?dòng)畫屬性中添加如下的觸發(fā)器定義。

trigger('balloonEffect', [ 
 state('initial', style({ 
 backgroundColor: 'green', 
 transform: 'scale(1)' 
 })), 
 state('final', style({ 
 backgroundColor: 'red', 
 transform: 'scale(1.5)' 
 })), 
 transition('final=>initial', animate('1000ms')), 
 transition('initial=>final', animate('1500ms')) 
 ]), 

在此，我們使用轉(zhuǎn)換屬性來更改所有方向的尺寸大小。當(dāng)該元素的狀態(tài)發(fā)生變化時(shí)轉(zhuǎn)換隨即發(fā)生。

請(qǐng)?jiān)赼pp.component.html文件中添加如下HTML代碼。

<h4>Balloon Effect</h4> 
<div (click)="changeState()" 
  
 [@balloonEffect]=currentState> 
</div> 

在此，我們定義了一個(gè)div，并通過CSS樣式來定義成一個(gè)圓圈。我們將通過點(diǎn)擊div去調(diào)用changeState，從而實(shí)現(xiàn)元素狀態(tài)的切換。

下圖便是該動(dòng)畫在瀏覽器中的運(yùn)行效果：

淡入和淡出動(dòng)畫

有時(shí)候，我們需要在顯示動(dòng)畫的同時(shí)，對(duì)DOM添加或移除元素。下面，我們來看看如何通過對(duì)一個(gè)列表添加或刪除條目，以實(shí)現(xiàn)淡入和淡出的動(dòng)畫效果。

請(qǐng)將如下代碼插入AnimationdemoComponent類的定義之中。

listItem = []; 
list_order: number = 1; 
addItem() { 
 var listitem = "ListItem " + this.list_order; 
 this.list_order++; 
 this.listItem.push(listitem); 
} 
removeItem() { 
 this.listItem.length -= 1; 
} 

請(qǐng)?jiān)谠搫?dòng)畫的屬性中添加如下的觸發(fā)器定義。

trigger('fadeInOut', [ 
 state('void', style({ 
 opacity: 0 
 })), 
 transition('void <=> *', animate(1000)), 
]), 

在此，我們定義了觸發(fā)器fadeInOut。當(dāng)該元素被添加到DOM時(shí)，它的狀態(tài)就從void轉(zhuǎn)換為wildcard，我們表示為void => *。而當(dāng)該元素從DOM刪除時(shí)，它的狀態(tài)就從wildcard轉(zhuǎn)換為void，我們表示為* => void。

我們給動(dòng)畫的不同方向使用相同的動(dòng)畫定時(shí)，其語法為<=>。正如該觸發(fā)器所定義的，動(dòng)畫從void => * 和 * => void，都需要1000毫秒才能完成。

請(qǐng)?jiān)赼pp.component.html文件中添加如下HTML代碼。

<h4>Fade-In and Fade-Out animation</h4> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div > 
 <ul> 
 <li *ngFor="let list of listItem" [@fadeInOut]> 
 {{list}} 
 </li> 
 </ul> 
</div> 

在此，我們定義了兩個(gè)按鈕來添加和刪除條目。我們將fadeInOut觸發(fā)器與元素綁定，以實(shí)現(xiàn)在對(duì)DOM進(jìn)行添加、刪除時(shí)，能夠出現(xiàn)淡入和淡出的效果。

下圖便是該動(dòng)畫在瀏覽器中的運(yùn)行效果：

進(jìn)入和離開動(dòng)畫

此外，我們還能夠通過對(duì)DOM的添加，實(shí)現(xiàn)某個(gè)元素從左邊進(jìn)入屏幕;而在刪除時(shí)，能讓該元素從右邊離開屏幕。

由于從void => * 和 * => void 的轉(zhuǎn)換十分常見。因此，Angular為這些動(dòng)畫提供了別名機(jī)制：

對(duì)于 void => * ，我們可以用':enter'
對(duì)于 * => void ，我們可以用':leave'

這兩個(gè)別名使得此類轉(zhuǎn)換更具可讀性，也更容易被理解。

請(qǐng)?jiān)趧?dòng)畫的屬性中添加如下觸發(fā)器的定義。

trigger('EnterLeave', [ 
 state('flyIn', style({ transform: 'translateX(0)' })), 
 transition(':enter', [ 
 style({ transform: 'translateX(-100%)' }), 
 animate('0.5s 300ms ease-in') 
 ]), 
 transition(':leave', [ 
 animate('0.3s ease-out', style({ transform: 'translateX(100%)' })) 
 ]) 
]) 

在此，我們定義了觸發(fā)器EnterLeave。那么':enter'的轉(zhuǎn)換需要等待300毫秒，然后運(yùn)行0.5秒，并實(shí)現(xiàn)滑入的效果;而':leave'的轉(zhuǎn)換只運(yùn)行0.3秒，實(shí)現(xiàn)滑出的效果。

請(qǐng)?jiān)赼pp.component.html文件中添加如下HTML代碼。

<h4>Enter and Leave animation</h4> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div > 
 <ul> 
 <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'"> 
 {{list}} 
 </li> 
 </ul> 
</div>

在此，我們定義了兩個(gè)按鈕來對(duì)列表添加和刪除條目。我們將EnterLeave觸發(fā)器與元素綁定，以實(shí)現(xiàn)在對(duì)DOM進(jìn)行添加、刪除時(shí)，出現(xiàn)滑入和滑出的效果。

下圖便是該動(dòng)畫在瀏覽器中的運(yùn)行效果：

結(jié)論

綜上所述，我們針對(duì)Angular 6的動(dòng)畫效果，探討了動(dòng)畫狀態(tài)和轉(zhuǎn)換的概念，也通過一個(gè)應(yīng)用示例展示了實(shí)際的動(dòng)畫代碼與效果。

推薦：

感興趣的朋友可以關(guān)注小編的微信公眾號(hào)【碼農(nóng)那點(diǎn)事兒】，更多網(wǎng)頁制作特效源碼及學(xué)習(xí)干貨哦?。?！

以上所述是小編給大家介紹的使用Angular 6創(chuàng)建各種動(dòng)畫效果的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！