angular animation現在是angular默認之外的一個官方組件庫，在angular2的時候它是作為核心組件庫的一部分，到了angular4的時候為了減小核心庫的體積，就把它單獨移出了核心組件，但是這并不說明它不重要，angular動畫是angular應用中重要的組成部分，而且它也是官方內建提供的支持，只不過不在angular core核心組件里了，

安裝動畫庫：

cnpm i --save @angular/animations

安裝完之后要在app.module.ts文件中導入

導入動畫模塊之后在app.component.ts文件中會有一個animations的元數據，元數據里面會規定好一些觸發器，觸發器的名字會在響應的元素中模板當中 ，@后面跟的是觸發器的名字。

import { environment } from '../environments/environment';
import { Component } from '@angular/core';
import { OverlayContainer } from '@angular/material';
import { trigger,state,transition,style,animate} from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('square',
      [
        state('green', style({ 'background-color': 'green','height':'100px','transform':'translateX(0)' })),
        state('red', style({ 'background-color': 'red','height':'50px','transform':'translateX(100%)' })),
        transition('green => red', animate('0.2s 1s')),
        transition('red => green', animate(500))
      ]
    )
  ]
})
export class AppComponent {

  squareState='red';
  darkTheme = false;

  constructor(private oc: OverlayContainer) { 

  }

  swichTheme(dark) {
    this.darkTheme = dark.checked;
    this.oc.themeClass = dark ? 'myapp-dark-theme' : null;
  }

  onClick() {
    this.squareState = this.squareState==='red' ? 'green' : 'red';
  }
}

 <div class="square" [@square]="squareState" (click)="onClick()"></div>

animations元數據的要素：
它會定義一個觸發器，當然你可以在animations當中定義多個觸發器，觸發器就是我規定好一個動畫，這個動畫由 state，transition這兩個基本元素來構成，動畫就是從一個狀態(state)遷移(state)到另一個狀態，transition用來說明這個狀態的遷移是什么樣的，以什么速度，什么時間來遷移。animate那個函數是用來輔助transition的，animate就是說以什么樣的形式來遷移。
animate函數有三個參數，最后一個參數是緩動函數（緩動函數是指動畫效果在執行時的速度，使其看起來更加真實）

W3C的Web Animation標準暫時無法支持所有的cubic-bezier函數

幀-就是動畫中最小單位的單幅影像畫面。
關鍵幀-物體運動或變化中的關鍵動作所處的那一幀

用關鍵幀實現的栗子：（主要用到keyframes方法）

import { environment } from '../environments/environment';
import { Component } from '@angular/core';
import { OverlayContainer } from '@angular/material';
import { trigger,state,transition,style,animate,keyframes} from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('square',
      [
        state('green', style({ 'background-color': 'green','height':'100px','transform':'translateY(-100%)' })),
        state('red', style({ 'background-color': 'red','height':'100px','transform':'translateY(100%)' })),
        transition('green => red', animate('0.8s ease-in')),
        transition('red => green', animate(5000, keyframes([
          style({ 'transform': 'translateY(100%)' }),
          style({ 'transform': 'translateY(98%)' }),
          style({ 'transform': 'translateY(95%)' }),
          style({ 'transform': 'translateY(90%)' }),
          style({ 'transform': 'translateY(80%)' }),
          style({ 'transform': 'translateY(60%)' }),
          style({'transform':'translateY(30%)'}),
          style({ 'transform': 'translateY(0%)' }),
          style({ 'transform': 'translateY(-10%)' }),
          style({ 'transform': 'translateY(-5%)' }),
          style({ 'transform': 'translateY(-2%)' }),
          style({ 'transform': 'translateY(0%)' }),
          style({ 'transform': 'translateY(10%)' }),
          style({ 'transform': 'translateY(150%)' }),
          style({ 'transform': 'translateY(-15%)' }),
          style({ 'transform': 'translateY(-40%)' }),
          style({ 'transform': 'translateY(80%)' }),
          style({ 'transform': 'translateY(90%)' }),
          style({ 'transform': 'translateY(95%)' }),
          style({ 'transform': 'translateY(100%)' }),
        ])))
      ]
    )
  ]
})
export class AppComponent {

  squareState='red';
  darkTheme = false;

  constructor(private oc: OverlayContainer) { 

  }

  swichTheme(dark) {
    this.darkTheme = dark.checked;
    this.oc.themeClass = dark ? 'myapp-dark-theme' : null;
  }

  onClick() {
    this.squareState = this.squareState==='red' ? 'green' : 'red';
  }
}