封装变速动画

Posted 2021-12-05 ironman725

tags:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            position: absolute;
            margin-top: 30px;
            left: 0px;

        }
    </style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    //封装变速动画
    //@params : 元素  目标位置
    function animateBian(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //获取当前的元素的位置
            var current = element.offsetLeft;
            //设置移动的步数
            var step = (target - current)/10;
            //判断步数 > 0, 则向上取整 ,否则向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //获取每次移动后的left值
            current += step;
            element.style.left = current + "px";
            if(current == target){
                clearInterval(element.timeId);
            }
            console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current );
        },10)
    }

    my$("btn1").onclick = function () {
        animateBian(my$("box"), 400);
    }
    my$("btn2").onclick = function () {
        animateBian(my$("box"), 800);

    }


</script>
</body>
</html>

以上是关于封装变速动画的主要内容，如果未能解决你的问题，请参考以下文章

封装变速动画

变速动画函数封装增加任意一个属性

变速动画函数封装增加任意多个属性值

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

变速动画函数封装增加任意多个属性透明度和层级