当我在查找Ionic 2的动画时,我发现了一些动画,但并不是我想要的。
我想要制作像"淡入淡出"这样的动画,比如说,我有5张图片,每2秒钟就会将当前的图片更换为其他图片,并使用淡入淡出效果。
我可以使用"setinterval"来重复我的代码,并在2秒后逐一更改我的图片,但我不知道是否能够实现淡入淡出动画!
以下是我的代码示例(HTML + TS + Sample Gif Image)
HTML
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<img src="imgs/{{variables.imageName}}.jpg">
</ion-content>
TS
export class HomePage {
variables={
imageName:"image1"
}
public loop1;
constructor(public navCtrl: NavController) {
this.loop1 = setInterval(() => {
this.changeImage();
}, 2000);
}
changeImage(){
if(this.variables.imageName=="image1"){
this.variables.imageName="image2";
}
else if(this.variables.imageName=="image2"){
this.variables.imageName="image3";
}
else if(this.variables.imageName=="image3"){
this.variables.imageName="image1";
}
}
}
结果(我想让它们之间淡入淡出)