js 封装一个动画函数

Posted wanguofeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 封装一个动画函数相关的知识,希望对你有一定的参考价值。

//动画函数---任意一个元素移动到指定的目标位置
    //element为元素 target为位置
    function carToon(element, target) {
        //设置一个定时器让他循环去增加
         element.timeid = setInterval(function () {
            //拿到当前的位置(纯数字)
            var current = element.offsetLeft;
            //每次要移动的像素current
            var step = 10;
            //注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走(往左边走 就是负的像素)
            //否则 当前位置小于目标地址 就继续往右走(正数的像素)
             step = current > target ? -step : step;
            //这里是移动之后的位置
             current += step;
            //判断目标位置-当前的位置是否大于每次走的像素
            if (Math.abs(target - current) > Math.abs(step)) {
                //继续移动
                element.style.left = current + ‘px‘;
            } else {
                //目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置
                clearInterval(element.timeid);
                element.style.left = target + ‘px‘;
            }
        }, 10)
    }

 

以上是关于js 封装一个动画函数的主要内容,如果未能解决你的问题,请参考以下文章

JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数

回归 | js实用代码片段的封装与总结(持续更新中...)

JS---案例:手风琴 (利用封装好的动画函数)

js动画学习

移动端滑屏全应用移动端动画贞动画函数mTween封装

js 变速动画函数