使用js实现简单的动画效果

下面给大家分享一下，js实现打地鼠中地鼠（这里是灰太狼）的上升运动的动画效果

1.首先准备好一套渐进的图片

（实现原理，注意图片后面的数字为有序的，也可以自己改，而且我们想要切换图片时，通过改变h后面的数字就可以实现了）

2.创建一个img，并用js获取他的对象，用于装我们的图片（这里通过id获取，）

3.通过setAttribute给img添加src，而且变量i的自增则是控制着图片的切换

 

4.接下来只需要通过一个计时器重复调用fn方法就可以实现地鼠上升的动画了（还有一个问题就是i是在不断递增的，而且图片只到5就结束了，使用我们需要在方法中设置一个判断，超过5时就停止定时器）

 5.要实现下降的效果其实与上升是同理的，只需要让变量从5开始递减就可以实现了，在这里我就不做演示了，