angular2項目關於動畫的處理

animations動畫在angular2官網裏面已經講解很詳細了，那麼動畫功能在實際項目中應該如何組織文件，動畫文件放在哪一個位置，如何來組織結構使得動畫模塊和其餘模塊之間運做調理清晰呢，下面參照NiceFish來說解一下：

 

 一：定義動畫

在app文件夾裏面有一個專門的動畫模塊

拿一個例子來簡單分析一下：

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

export const flyIn = trigger('flyIn', [
  state('in', style({transform: 'translateX(0)'})),
  transition('void => *', [
       animate(300, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(25px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))
  ]),
  transition('* => void', [
        animate(300, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
      ]))
  ])
]);

trigger用於定於動畫功能，返回動畫模塊，第一個參數'flyIn'是動畫指令名，
第二個參數是一個數組，state是定義每一個動畫的狀態(元素動畫的每一個最終狀態)，動畫的狀態裏面的樣式不只包含動畫行爲最終樣式，也能夠包含非動畫的樣式，好比 A狀態height=0轉到B狀態height=100，B裏面的狀態樣式不只height=100，還能夠加入color，background等無關動畫行爲的樣式。
transition定義動畫狀態與另外一個動畫狀態轉化過程當中具體的動做狀況。有兩個形式：

 transition('* => void', [
        animate(300, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
      ]))
  ])

 

上面的動畫行爲定義是用到了keyframes，第一個參數300表明這個動畫的持續時間。keyframes數組裏面的每一個元素表明某個時刻的動畫樣式狀態，offset表明時間刻度。

transition('void => *', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition('* => void', [
      animate('0.2s 0.1s ease-out', style({
        opacity: 0,
        transform: 'translateX(100%)'
      }))
    ])

上面的這種動畫行爲用的是animate，tansition方法第一個參數是動畫名稱，第二個參數是一個數組，咱們知道若是一個動畫有起始狀態，有最終狀態，而最終狀態已經定義在了state裏面，那麼起始狀態有事什麼呢？這裏style所定義的就是起始狀態。

裏面的style方法定義的樣式是動畫前或者動畫後的特定狀態，動畫正是基於style所定義的狀態逐步轉化爲state裏面的樣式狀態。　　

二：裝載動畫

在組件文件中動畫指令會被定義在組件當中，使得組件模塊（angular模塊）可以在編譯本身視圖的時候可以識別動畫指令
在component.ts文件中：

import { fadeIn } from '../../animations/fade-in';

@Component({
  animations: [ fadeIn ]，    // 動畫指令列表   
  。。。。
})    

 

 三：使用動畫

在component.html組件視圖中：

 

[@fadeIn]="state"

這裏的sate表明最終狀態。若是@fadeIn沒有賦值的話，動畫會取定義的默認狀態爲最終狀態。有賦值的話好比[@fadeIn]="in"：表示該元素視圖出現的時候會通過 vode ——>*所定義的動畫行爲，最後狀態到達In這個stae的樣式。