angular2的動畫_ZenDei技術網路在線

談起angular2（現在已經angular4）了，個人覺得angular2的官方文檔不太適合初學者（真心吐槽..），所以每一塊弄懂都不那麼容易。為了弄懂angular的動畫自己也是花了一番功夫，不客觀的說，angular的動畫寫起來是比較複雜的，但又必須掌握。下麵是我結合官方文檔以及王芃老師寫 ...

談起angular2（現在已經angular4）了，個人覺得angular2的官方文檔不太適合初學者（真心吐槽..），所以每一塊弄懂都不那麼容易。

為了弄懂angular的動畫自己也是花了一番功夫，不客觀的說，angular的動畫寫起來是比較複雜的，但又必須掌握。

下麵是我結合官方文檔以及王芃老師寫的資料，自己通過實踐寫出來的一篇博客，希望可以幫到有需求的小伙伴，當然，如果文章有地方寫的錯誤，歡迎指正。

好了，廢話不多說，開始正文吧。

1：angular動畫的使用需要先引入一些與動畫有關的函數。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

組件里引用：（：暫時先在組件里寫動畫相關的代碼，文末會把它單獨抽離出來

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

註：有些小伙伴的項目開始的時候可能沒有動畫相應的資源包，請暫時允許我這麼說。此時你就需要在項目依賴包里先加入這個資源。

如何加入呢？定位到你的項目上，命令行輸入：

npm install @angular/animations --save

當你檢查到你的package.json里出現：

此時說明動畫資源已經被成功下載了。ok，現在我們開始動畫吧：

********：開始第一個動畫（交通信號燈..）：

1：請首先在你的組件.ts代碼里的@Component裝飾器里添加如下代碼：

animations: [
    trigger('signal', [
      state('go', style({
        'background-color': 'green'
      }))
    ])
  ]

模板（html）里添加：

<div class="traffic-light" [@signal]="'go'"></div>

css里樣式：

.traffic-light{  width: 100px;  height: 100px;  background-color: black;  }

本來div定義的樣式背景色是黑色，但是div在頁面中卻呈現的是綠色，見圖：

現在問題來了，綠色怎麼來的呢 ? 見圖：

因為div元素此時處於動畫里的go狀態。所以div具有go狀態里被描述的動畫樣式。

如果你不懂為什麼要這樣定義動畫，暫時你只需要知道這樣寫就行了。

2：讓我們加入兩個按鈕，此時兩個按鈕要做的是：讓div元素切換不同的背景色。

此時可能有的小伙伴會覺得我直接用js寫不就好了嗎？（下麵用原生js僅為提供意思，

btn1.onclick = function(){
    div.style.background = 'xxx';        
}

btn2.onclick = function(){
    div.style.background = 'xxx';        
}

請先務著急，不妨先看看利用動畫是如何製作呢。見模板:圖

見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))

註：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:

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';
  }
}

我們來見一下具體表現：

這個動畫是怎麼產生的呢？

先見

在這個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)'))

這個狀態定義表示任意狀態到任意狀態的過程，也就是我們點擊按鈕div當前的狀態到go or stop的狀態，表現為動畫1秒延遲後div以0.5秒的時間完成這個動畫。

可能有的人會問最後那個div元素有反彈的效果是因為什麼呢？這篇文章就不做解釋了，如果有興趣你可以搜一下貝塞爾曲線。

至此，angular2的動畫就介紹完畢了。嗷嗷，對了，這種在組件里寫動畫的方式是不夠優雅的，我們可以把這個動畫單獨提取出來，如何提取呢？

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

2：而後，在組件ts里引入：

import { SingalAnimate } from './animate';

3：最後，在元數據animation 里添加：

animations: [ SingalAnimate ]

npm start, 看看效果吧~

至此，angular2動畫也就結束了。