笔者最近在生产中，遇到了需要开发自动运行并循环播放的动画的需求。虽然用纯CSS也能实现该效果，但还是想使用angular的animation来实现。

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

• 1.首先，做动画首先需要一个html元素：

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

• 2.其次，定义该元素的静态样式，保证在动画结束之后，或者设定动画延迟时能有效展示：

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

• 3.在组件中定义anm动画：

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动画的结束回调，这里是关键，通过对toState属性的处理，实现了循环

/**
  * @desc 结束回调循环
  * @param ev
  */
  Done(ev) {
    switch (ev.toState) {
      case 'start':
        this.state = 'end';
        break;
      case 'end':
        this.state = 'start';
        break;
      default:
        break;
    }
  }

• 5.完成！看效果吧

结语：

笔者感觉还是比较好实现的，而且相对于原生动画，更能把握各个状态之间的转换。