笔者最近在生产中，遇到了需要开发自动运行并循环播放的动画的需求。虽然用纯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.完成！看效果吧
结语：
笔者感觉还是比较好实现的，而且相对于原生动画，更能把握各个状态之间的转换。
