关于缓动动画函数的封装

2019-01-15 07:02:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

?缓动动画函数


 

· 之前我在博客上写过匀速的动画函数 :https://www.cnblogs.com/Lzxgg-xl/p/10227127.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) }

 

         


原文链接:https://www.cnblogs.com/Lzxgg-xl/p/10257638.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js canvas 转动时钟实例

下一篇:javascript最常用的对象创建方式