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

左手的ㄟ右手 2022-07-13 23:27 57阅读 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>