JS特效之简单动画封装

来源：互联网发布：ansible.cfg mac 编辑：程序博客网时间：2024/06/06 04:15

这是一个简单的盒子移动问题，个人觉得比较经典，容易理解。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画封装</title>    <style>        .box1 {            margin: 0;            padding: 10px;            height: 200px;            background-color: lightpink;            position: relative;        }        button {            margin: 5px;        }        .box2 {            width: 100px;            height: 100px;            background-color: red;            position: absolute;            left: 0;        }    </style></head><body><div class="box1">    <button>运动300</button>    <button>运动600</button>    <div class="box2"></div></div><script>    var btnArr = document.getElementsByTagName("button");    var box2 = document.getElementsByClassName("box2")[0];    var timer = null;    btnArr[0].onclick = function () {        timer = setInterval(function () {            //盒子自身的位置+步长            box2.style.left = box2.offsetLeft + 10 + "px";            //如果停止盒子？清除定时器            if(box2.offsetLeft === 300){                clearInterval(timer);            }        },30);    }    btnArr[1].onclick = function () {        timer = setInterval(function () {            //盒子自身的位置+步长            box2.style.left = box2.offsetLeft + 10 + "px";            //如果停止盒子？清除定时器            if(box2.offsetLeft == 600){                clearInterval(timer);            }        },30);    }</script></body></html>

以上代码运行以后，你会发现，你只有在点击第一次的时候，得到想要的效果，多次点击就会出现bug，下面我们来看看如何解决这些bug。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box1 {            margin: 0;            padding: 5px;            height: 200px;            background-color: #ddd;            position: relative;        }        button {            margin: 5px;        }        .box2 {            width: 100px;            height: 100px;            background-color: red;            position: absolute;            left: 0px;        }    </style></head><body><div class="box1">    <button>运动200</button>    <button>运动400</button>    <div class="box2"></div></div><script>    var btnArr = document.getElementsByTagName("button");    var box2 = document.getElementsByClassName("box2")[0];    var timer = null;    btnArr[0].onclick = function () {        animate(200);    }    btnArr[1].onclick = function () {        animate(400);    }    function animate(target) {        //bug1：点击多次以后，越来越快：解决：每次只能开一个定时器，执行定时器前先清除定时器。        //常识：调用定时器，先清除定时器。        clearInterval(timer);        //bug2：多次点击，无法返回，一直向后走        //      原因：步长不能为恒定值，        //            传递的目标值如果比当前值大，步长为+10；        //            传递的目标值如果比当前值小，步长为-10；        var speed = (target - box2.offsetLeft)>0 ? 10 : -10;        timer = setInterval(function () {            //bug3：二次点击不停止，来回移动问题            //原因：如果当前值===目标值，那么先判断之前的距离还有多少，如果小于不长，那就不走了。            var val = target - box2.offsetLeft;            //盒子自身的位置+步长            box2.style.left = box2.offsetLeft + speed + "px";            if(Math.abs(val)<10){                box2.style.left = target + "px";                clearInterval(timer);            }        },30);    }    </script></body></html>

经过上述处理，可以达到多次点击不出现bug的效果。

如果有一天要传递另外一个盒子，那么我们的方法就不好用了，所以应该增加一个参数，使得封装的动画可以在任何一个盒子上使用。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box1 {            margin: 0;            padding: 5px;            height: 200px;            background-color: #ddd;            position: relative;        }        button {            margin: 5px;        }        .box2 {            width: 100px;            height: 100px;            background-color: red;            position: absolute;            left: 0px;            top: 40px;        }        .box3 {             width: 100px;             height: 100px;             background-color: pink;             position: absolute;             left: 0px;            top: 150px;         }    </style></head><body><div class="box1">    <button>运动200</button>    <button>运动400</button>    <div class="box2"></div>    <div class="box3"></div></div><script>    var btnArr = document.getElementsByTagName("button");    var box2 = document.getElementsByClassName("box2")[0];    var box3 = document.getElementsByClassName("box3")[0];    var timer = null;    //绑定事件    btnArr[0].onclick = function () {        //如果有一天要传递另外一个盒子，那么我们的方法就不好用了，        // 所以我们要增加第二个参数：被移动的盒子本身。        animate(box3,200);    }    btnArr[1].onclick = function () {        animate(box3,400);    }    function animate(ele,target) {        //常识：调用定时器，先清除定时器。        //一个盒子只能有一个定时器，这样的话，被移动的是这个盒子本身        clearInterval(timer);        var speed = (target - ele.offsetLeft)>0 ? 10 : -10;        timer = setInterval(function () {            var val = target - ele.offsetLeft;            //盒子自身的位置+步长            ele.style.left = ele.offsetLeft + speed + "px";            if(Math.abs(val)<10){                ele.style.left = target + "px";                clearInterval(timer);            }        },30);    }    </script></body></html>

最后一种方法可以运用到多个不同盒子中。

阅读全文

0 0