关于缓动动画函数的封装

♥缓动动画函数

---

 

· 以前我在博客上写过匀速的动画函数 ：http://www.javashuo.com/article/p-mrnjvbhf-bv.html

· 与匀速的相比  有相同的地方 也有不一样的地方 我在这里就简单的写一遍

 

　　一. 首先仍是同样，由于它是个函数体咱们要传参  即 ： 

　　　　1.移动的元素

　　　　2.移动的目的地

　　　

　　 二. 和匀速的同样  要先清理定时器 否则会发生点击屡次移动的速度愈来愈快的情况

　　　　　1.由于每点击一次按钮 就会多生成一个定时器   生成的多了以后 速度就会加快 由于若是两个定时器一块儿进行 本来40的速度就会变成80

　　　　　2.由于咱们写的是缓动的动画效果  因此可能视觉上看的并非很明显 可是咱们要注意偏差  要作到尽可能严谨

　　三. 和匀速不一样的地方

　　　　　　 每次移动的距离是变化的   这个的具体实现是这样的：

　　　　　　　　　每次令step = （target-current）/10  

　　　　　　　　　这样会出现有小数存在的状况 然而若是一直有小数 咱们一直没法到达重点 就会是一个死循环 

　　　　　　　　　若是step是正数  咱们向下取整 那么也是永远到不了的 由于到了0.x的小数的时候你向下取整  永远是0  也止步不前

　　　　　　　　　因此说 正数的话要向上取整   负数的话向下取整就能够解决这个问题

　　　　　　下面给出代码：

　　　　

function animate(element, target) {
    //先清理定时器
    clearInterval(element.timeID);


//缓动动画函数的封装
    element.timeID= setInterval(
        function () {
            var current = element.offsetLeft;
            var step = (target - current) / 10;
            //若是step 是正数 那么取的时候要向上取整  否则永远没法到达目的地
            //  若是step 是负数 那么取得时候要向下取整  否则永远没法到达目的地
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style.left = current + "px";
            if (current == target){
                clearInterval(element.timeID);
            }
            console.log("当前距离是"+ current +",每一步移动"+Math.abs(step));
　　　　　　　//这个写入操做台的呢  是为了防止有错误  就是说用来检查本身写的对不对  若是你写熟练了那么能够去掉

        }
        , 20)

}