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

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

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

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

使用js实现简单的动画效果_第1张图片

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

使用js实现简单的动画效果_第2张图片

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

使用js实现简单的动画效果_第3张图片

 

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

使用js实现简单的动画效果_第4张图片

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

 

你可能感兴趣的:(动画,html5,javascript)