Angular 动画

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