【vue】图标自动变换显示不同图片

我们浏览一些购物App或者社交App时，经常会看到一些图标会自动的变换，除了使用GIF实现，也可以使用定时器实现，先看效果～

具体教程：
第一步先去阿里矢量素材库下载几张自己喜欢的矢量图，下载格式我选择的是svg格式。下载好之后放到项目的static文件夹中。
第二步，写好html布局，使用image标签来放矢量图，在data中定义path数组，里面的数组元素为矢量图的存放路径，再定义一个count，然后src动态绑定path：

第三步，在mounted钩子里创建一个定时器，使图动起来。if条件根据自己图片张数调整。

mounted(){
			this.timer = setInterval(()=>{
				this.count++
				if(this.count > 2){
					this.count = 0
				}
			},1500)
			this.date = new Date()
			
		},

别忘了在beforeDestroy钩子里清除定时器！

beforeDestroy() {
			clearInterval(this.timer)
		}

此时图标已经实现了自动变换，但是没有过渡动画效果，图标变换不够丝滑，所以要给图标添加动画效果。
第四步，在Animate.css库中选择一个动画效果。
先在项目里安装依赖：

npm install animate.css --save

在项目的App.vue中引入animate.css：

注意在main.js中引入animate.css是无效的。
给image添加my-element类，my-element的样式如下：

.my-element {
  display: inline-block; 
  animation: zoomIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.5s; /* don't forget to set a duration! */
  animation-iteration-count: infinite; 
}

animation的值为何种动画效果，我选择了animate.css库里的zoomIn放大效果，你也可以选择其他的动画效果 ，看个人喜好。
animation-duration动画持续时间要和定时器的时间保持一致，我定的都是1.5s，否则图标变换会紊乱。
到此就实现了图标自动变换的效果，且有过渡动画。