【51CTO.com快譯】介紹

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

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

準(zhǔn)備工作

安裝Visual Studio Code和Angular CLI。

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

源代碼

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

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

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

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

動畫轉(zhuǎn)換定時

我們在自己的應(yīng)用中，通過定義動畫轉(zhuǎn)換的定時，來顯示從一個狀態(tài)過度到另一個狀態(tài)。Angular為我們提供了如下三種與時間相關(guān)的屬性：

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

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

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

2.延遲(Delay)

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

3.滑動(Easing)

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

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

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

請在您的計算機上打開命令提示行，并執(zhí)行以下命令集：

• mkdir ngAnimationDemo
• cd ngAnimationDemo
• ng new ngAnimation

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

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

請依次進入View >> Integrated Terminal，這將打開Visual Studio Code的終端窗口。

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

ng g c animationdemo 

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

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

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

理解Angular動畫的語法

下面，我們在組件的元數(shù)據(jù)中編寫動畫代碼。其語法如下： 

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

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

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

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

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

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

<div @changeSize></div>  

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

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

更改大小的動畫

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

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

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

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

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')) 
  ]), 
]  

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

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

為了改變元素的狀態(tài)，我們在組件的類定義中定義了一個功能函數(shù)。我們將如下代碼包含在AnimationdemoComponent類中： 

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

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

請打開animationdemo.component.html文件，并添加以下代碼： 

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

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

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

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

<app-animationdemo></app-animationdemo> 

請在Visual Studio Code的終端窗口里運行ng serve命令，以執(zhí)行該代碼。運行完畢后，它會提示您在瀏覽器中打開http://localhost:4200。隨后，您就會在瀏覽器中看到如下點擊按鈕的動畫效果。

氣球動畫效果

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

請在動畫屬性中添加如下的觸發(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ā)生變化時轉(zhuǎn)換隨即發(fā)生。

請在app.component.html文件中添加如下HTML代碼。 

<h3>Balloon Effect</h3> 
<div (click)="changeState()"  
  style="width:100px;height:100px; border-radius: 100%; margin: 3rem; background-color: green" 
  [@balloonEffect]=currentState> 
</div>  

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

下圖便是該動畫在瀏覽器中的運行效果：

淡入和淡出動畫

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

請將如下代碼插入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; 
}  

請在該動畫的屬性中添加如下的觸發(fā)器定義。 

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

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

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

請在app.component.html文件中添加如下HTML代碼。

<h3>Fade-In and Fade-Out animation</h3> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div style="width:200px; margin-left: 20px"> 
  <ul> 
    <li *ngFor="let list of listItem" [@fadeInOut]> 
      {{list}} 
    </li> 
  </ul> 
</div>  

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

下圖便是該動畫在瀏覽器中的運行效果：

進入和離開動畫

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

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

• 對于 void => * ，我們可以用':enter'
• 對于 * => void ，我們可以用':leave'

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

請在動畫的屬性中添加如下觸發(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毫秒，然后運行0.5秒，并實現(xiàn)滑入的效果;而':leave'的轉(zhuǎn)換只運行0.3秒，實現(xiàn)滑出的效果。

請在app.component.html文件中添加如下HTML代碼。

<h3>Enter and Leave animation</h3> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div style="width:200px; margin-left: 20px"> 
  <ul> 
    <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'"> 
      {{list}} 
    </li> 
  </ul> 
</div> 

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

下圖便是該動畫在瀏覽器中的運行效果：

結(jié)論

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

原文標(biāo)題：Understanding Angular 6 Animations，作者：Ankit Sharma

 

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】