angular 2 animate 筆記

好久沒有在這里寫點筆記了。時隔已久，angular1 去 angular2 咯

筆記來源：https://angular.cn/docs/ts/latest/guide/animations.html

動畫基於這標准：https://w3c.github.io/web-animations/

 

以下是基本設置

template: `
    <button (click)="heroState = 'active'">enter</button>
    <button (click)="heroState = null">leave</button>
    <button (click)="changeAnimate()">animate</button>
    <div *ngIf="heroState" [@heroState]="heroState" 
      (@heroState.start)="animationStarted($event)"
      (@heroState.done)="animationDone($event)"
      style="width:100px; height:100px;">example</div>
      {{heroState}}
`,
animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

 

在animate 中，需要理解幾樣東西就能明白真個筆記。

1. @trigger （綁定elem）
2. 狀態 （通過狀態轉換改變style）
3. 過渡 （動畫）

狀態與過渡 ：state 是狀態，表明樣式。過渡是動畫，聲明某個狀態去到某個狀態

state('inactive', style({
  backgroundColor: '#eee',
  transform: 'scale(1)'
})),
state('active',   style({
  backgroundColor: '#cfd8dc',
  transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))

合拼過渡

transition('inactive <=> active', animate('100ms ease-out'))

轉換不保留樣式：在過渡添加style，意思是當狀態轉換時，會使用指定樣式，接着執行動畫，結束后移除樣式

transition('inactive => active', [
  style({
    backgroundColor: '#cfd8dc',
    transform: 'scale(1.3)'
  }),
  animate('80ms ease-in', style({
    backgroundColor: '#eee',
    transform: 'scale(1)'
  }))
]),

通配符*，進場，出場 ： 都是狀態轉換的方式

    transition('inactive => *', [
      style({transform: 'translateX(-100%)'}),
      animate(100)
    ])

    transition('* => inactive', [
      animate(100, style({transform: 'translateX(100%)'}))
    ])


    transition('* => void', [ //:leave  省略寫法
      animate(100, style({transform: 'translateX(100%)'}))
    ])


    transition('void => *', [ //:enter  省略寫法
      animate(100, style({transform: 'translateX(100%)'}))
    ])

動畫變量 ： duration， delay，緩動(easing)函數

animate('2000ms 10 ease-in', style({
  backgroundColor: '#f00',
  transform: 'translateX(100%)'
})),

高級寫法：keyframe （css3 原理）

      animate(300, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))

組合animate ： 處理混合動畫

      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          width: 120
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])

回調 ： $event 可以得到 fromState，toState和totalTime

template: `
  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>
`,