js----rebound animation implementation-JS Tutorial-php.cn

js----rebound animation implementation

巴扎黑

Release： 2017-07-20 14:13:17

Original

1149 people have browsed it

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>#box{
            width:200px;
            height:200px;
            position: absolute;
            top:0;
            left:200px;
            background:lightblue;
        }
        .btn{
            position:absolute;
            top:200px;
            left:100px;
            height:50px;
        }
        .btn input{
            display:inline-block;
            margin-left:50px;
            outline: none;
            width:100px;
            height:50px;
            border:1px solid green;
            cursor:pointer;
        }</style>
</head>
<body>
    <div id=&#39;box&#39;></div>
    <div class=&#39;btn&#39;>
        <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
        <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
    </div>
    <script>var oBox = document.getElementById("box");var minLeft = 0;var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;var step = 5;var timer = null;function move(target){//target:告诉我要运动的目标位置            window.clearTimeout(timer);var curLeft = utils.css(oBox,"left");if(curLeft<target){//向右走if(curLeft+step>target){//边界utils.css(oBox,"left",target);return;
                }
                curLeft+=step;
                utils.css(oBox,"left",curLeft)
            }else if(curLeft>target){//向左走if(curLeft-step<target){//边界utils.css(oBox,"left",target);return;
                }
                curLeft-=step;
                utils.css(oBox,"left",curLeft)
            }else{//不需要运动return;
            }// timer = window.setTimeout(move,10)//这里有一个问题，点击按钮第一次target的值是有的，但是第二次通过setTimeout执行的时候没有给target进行传值。是undefinedtimer = window.setTimeout(function(){
                move(target);
            },10)//这样使用匿名函数包裹一下，就解决了上面的问题，但是这样写性能不好，因为每一次到达时间的时候，都需要执行一次匿名函数（形成一个私有的作用域）,在匿名函数中再执行move，但是move中需要用到的数据值在第一次执行的move方法中，需要把匿名函数形成的这个私有的作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有的作用域不能销毁        }
        document.getElementById(&#39;btnLeft&#39;).onclick = function(){
            move(minLeft)
        }
        document.getElementById(&#39;btnRight&#39;).onclick = function(){
            move(maxLeft)
        }        </script>
</body>
</html>

Copy after login

In order to solve the above problem of poor performance, the following is an optimized code: a function is used in it package, so that only a private scope created by the move function is not destroyed. When _move is executed, move will naturally be destroyed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>#box{
            width:200px;
            height:200px;
            position: absolute;
            top:0;
            left:200px;
            background:lightblue;
        }
        .btn{
            position:absolute;
            top:200px;
            left:100px;
            height:50px;
        }
        .btn input{
            display:inline-block;
            margin-left:50px;
            outline: none;
            width:100px;
            height:50px;
            border:1px solid green;
            cursor:pointer;
        }</style>
</head>
<body>
    <div id=&#39;box&#39;></div>
    <div class=&#39;btn&#39;>
        <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
        <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
    </div>
    <script>var oBox = document.getElementById("box");var minLeft = 0;var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;var step = 5;var timer = null;function move(target){//target:告诉我要运动的目标位置            _move();function _move(){
                window.clearTimeout(timer);var curLeft = utils.css(oBox,"left");if(curLeft<target){//向右走if(curLeft+step>target){//边界utils.css(oBox,"left",target);return;
                    }
                    curLeft+=step;
                    utils.css(oBox,"left",curLeft)
                }else if(curLeft>target){//向左走if(curLeft-step<target){//边界utils.css(oBox,"left",target);return;
                    }
                    curLeft-=step;
                    utils.css(oBox,"left",curLeft)
                }else{//不需要运动return;
                }

                timer = window.setTimeout(_move,10);
            }
            
        }
        document.getElementById(&#39;btnLeft&#39;).onclick = function(){
            move(minLeft)
        }
        document.getElementById(&#39;btnRight&#39;).onclick = function(){
            move(maxLeft)
        }        </script>
</body>
</html>

Copy after login

Note: In order to allow the current element to only run one animation at the same time (when the next animation starts, first clear the timer of the previous animation ): Ensure that the variable that receives the timer return value for all animations of the current element needs to be shared. There are two ways: 1. Globally receive (for example, the above code var timer = null) 2. Give the element Add custom attributes (as shown in the figure below)

##Summary: Through the above, we can get the results of animation optimization Four rules:

1. Boundary judgment plus step size

　2. Clear useless timing 3. When the outer function needs to pass parameters, you can nest a layer of functions inside to avoid the accumulation of scopes.

　4. Store the return value of the timer in the custom attribute of the element to prevent global variable conflicts and multiple animation executions at the same time

The above is the detailed content of js----rebound animation implementation. For more information, please follow other related articles on the PHP Chinese website!