筆者最近在生產(chǎn)中，遇到了需要開發(fā)自動(dòng)運(yùn)行并循環(huán)播放的動(dòng)畫的需求。雖然用純CSS也能實(shí)現(xiàn)該效果，但還是想使用angular的animation來(lái)實(shí)現(xiàn)。

以下提供一些基本的思路和代碼：

• 1.首先，做動(dòng)畫首先需要一個(gè)html元素：

<img src="/assets/your_pic.png" [@anm]="state" (@anm.done)="Done($event)" class="animatedElement"/>

• 2.其次，定義該元素的靜態(tài)樣式，保證在動(dòng)畫結(jié)束之后，或者設(shè)定動(dòng)畫延遲時(shí)能有效展示：

img.animatedElement {
        display: block;
        width: 15vh;
        position: relative;
        left: -25vw;
        top: 0;
}

• 3.在組件中定義anm動(dòng)畫：

const anm = trigger('anm', [
  state('void', style({ left: '-25vw' })),
  state('start', style({ left: '-25vw' })),
  state('end', style({ left: '100%' })),
  transition('start => end', [
    animate(14500)
  ])
]);

• 4.定義anm動(dòng)畫的結(jié)束回調(diào)，這里是關(guān)鍵，通過(guò)對(duì)toState屬性的處理，實(shí)現(xiàn)了循環(huán)

/**
  * @desc 結(jié)束回調(diào)循環(huán)
  * @param ev
  */
  Done(ev) {
    switch (ev.toState) {
      case 'start':
        this.state = 'end';
        break;
      case 'end':
        this.state = 'start';
        break;
      default:
        break;
    }
  }

• 5.完成！看效果吧

結(jié)語(yǔ)：

筆者感覺(jué)還是比較好實(shí)現(xiàn)的，而且相對(duì)于原生動(dòng)畫，更能把握各個(gè)狀態(tài)之間的轉(zhuǎn)換。