筆者最近在生產(chǎn)中，遇到了需要開(kāi)發(fā)自動(dòng)運(yùn)行并循環(huán)播放的動(dòng)畫(huà)的需求菱涤。雖然用純CSS也能實(shí)現(xiàn)該效果晶通，但還是想使用angular的animation來(lái)實(shí)現(xiàn)项钮。
以下提供一些基本的思路和代碼：
- 1.首先渣叛，做動(dòng)畫(huà)首先需要一個(gè)html元素：
<img src="/assets/your_pic.png" [@anm]="state" (@anm.done)="Done($event)" class="animatedElement"/>
- 2.其次丈秩，定義該元素的靜態(tài)樣式，保證在動(dòng)畫(huà)結(jié)束之后淳衙，或者設(shè)定動(dòng)畫(huà)延遲時(shí)能有效展示：
img.animatedElement {
display: block;
width: 15vh;
position: relative;
left: -25vw;
top: 0;
}
- 3.在組件中定義anm動(dòng)畫(huà)：
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)畫(huà)的結(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)畫(huà)匠童，更能把握各個(gè)狀態(tài)之間的轉(zhuǎn)換埂材。
