前端 —— JavaScript 基础篇 缓动动画（先快后慢的动画效果）demo

今天来个 缓动动画的小例子 ，是为了方便自己日后的复制粘贴，若是能帮助到大家，拿走不谢。话不多说，直接上代码。

 

	动画越来越来越慢，叫缓动动画

点击有动画效果

js 部分：

思路解析：

目标距离：target:500
第一次 （500-0） /10  =50
第二次 （500-50）/10  =45
第三次  (500-(50+45))/10 =40.5     
 第二次移动结束后div的距离是 95=50+45 也就是第三次开始移动的初始位置
 ...

 当快速点击按钮时：就等于多次调用了方法，计时器一直在叠加。速度越来越块
 解决：
     1、将计时器赋值给对象元素 odiv.timer,再执行计时器时 先停到计时器
     2、小数点问题：向右侧移动（目标值>0）时 向上取整数，让其更接近目标
                     Math.ceil(step)  比如：7.1  向上取 8
                     向左侧移动(目标值<0)时 向下取整数，同理
                     Math.floor(step)  比如：-9.9 向下取 -10
     3、将页面文档的默认的内外编剧清零时 

 增加功能：
     回调函数：动画结束后执行的动作
     触发事件后 
         调用计时器方法时：传递第三个参数 此参数是个函数；
         计时器的方法接收第三个形参，在动画结束后调用这个参数

 

 

 

 

 

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。