js动画基本原理和简单封装

最新推荐文章于 2023-02-02 14:44:52 发布

约德尔蒙

最新推荐文章于 2023-02-02 14:44:52 发布

阅读量441

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242534

版权

Js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>

</head>
<body>
<script>
//-------------------------动画的基本原理-----------------------

                var btn = document.getElementsByTagName("button")[0];
                var div = document.getElementsByTagName("div")[0];

                //闪动
                //    btn.onclick = function () {
                //        div.style.left = "500px";
                //    }

                //匀速运动
                btn.onclick = function () {
                    //定时器，每隔一定的时间向右走一些
                    setInterval(function () {
                        console.log(parseInt(div.style.left));
            //            div.style.left = parseInt(div.style.left)+10+"px";  //NaN不能用
                        //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
                        //style.left赋值，用offsetLeft获取值。
                        //style.left获取值不方便，获取行内式，如果没有事“”；容易出现NaN；
                        //offsetLeft获取值特别方便，而且是现成number方便计算。因为他是只读的不能赋值。
                        div.style.left = div.offsetLeft + 10 + "px";
                    },300);
                }


//------------------------------动画的最终封装------------------
            function animate(ele,target){
                //要用定时器，先清除定时器
                //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
                //而定时器本身讲成为盒子的一个属性
                clearInterval(ele.timer);
                //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
                //目标值如果大于当前值取正，目标值如果小于当前值取负
                var speed = target>ele.offsetLeft?10:-10;
                ele.timer = setInterval(function () {
                    //在执行之前就获取当前值和目标值之差
                    var val = target - ele.offsetLeft;
                    ele.style.left = ele.offsetLeft + speed + "px";
                    //目标值和当前值只差如果小于步长，那么就不能在前进了
                    //因为步长有正有负，所有转换成绝对值来比较
                    if(Math.abs(val)<Math.abs(speed)){
                        ele.style.left = target + "px";
                        clearInterval(ele.timer);
                    }
                },30)
            }
</script>
</body>
</html>