【JS动画】缓动动画封装

效果

没有效果,自己去调用试效果

技术点

定时器,内置函数使用,思维

实现

<script>
        // 要运动的盒子必须加定位
        // 简单动画封装,obj 目标对象 target 目标位置 callback 回调函数
        function animate(obj, target, callback) {
            // 给不同的元素指定不同的定时器obj.timer
            // 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
            // 解决方案,让元素只有一个定时器执行
            // 先清除以前的定时器,只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器里面
                // 把步长值改为整数,不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                // 如果step是正值,往大了取,负值,往小了取
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画效果(清除动画)
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式: (目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15); //推荐秒数为15毫秒
        }
    </script>

 

 

本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.zhoubaiwl.club/3263.htm
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录