2020-10-13 (elastic movement of js movement)

To do something, you should learn from Mr. Wen Yiduo, and there is no need to say it after you do it or do it.

elastic movement

Analysis: When you get a problem, you need to carry out a three-step analysis, clarify what you know, what you want, and find the connection between what you know and what you want.

  1. To achieve elastic motion, abstractly, it is similar to the back-and-forth telescopic motion of a small ball in physics after being stretched by a rubber band, and it is a motion in which the acceleration points to the center of the rubber band.
  2. The problems I have encountered in the process of self-implementation are: 1. When assigning the initial value of speed, acceleration, and friction, there is a problem of assigning values ​​inside the timer, which will cause the speed to be re-updated to the first one every time. It's impossible to slow down at all. 2. The variable that is changed inside the timer is the acceleration (dynamically changes with the distance of the dom element from the target). After the acceleration changes, we change the speed at that time accordingly, which is multiplied by a friction force.
  3. When the final judgment is made, because in the actual verification process, the acceleration calculated by a = (target - dom.offsetLeft) / 5; and finally through dom.style.left = dom.offsetLeft + iSpeed ​​+ 'px '; The change cannot be accurate so that the distance between the final dom element and the target is 0, but a decimal with an absolute value between 0 and 1, which will fall into the problem that the timer cannot be cleared, so we need to manually clear the timer at the same time Set dom.style.left = target; to make the dom element coincide with the target point. (similar to buffer movement)

Standard code implementation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elastic movement</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        span {
            width: 1px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 300px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        var oDiv = document.getElementsByTagName('div')[0];
        var timer = null;

        oDiv.onclick = function () {
            startMove(this, 300);
        }

        function startMove(dom, target) {

            clearInterval(dom.timer);

            // assign initial value
            var iSpeed = 0; //initial speed
            var a = 3;
            var u = 0.8; //friction

            // Change the movement of the dom through a timer
            dom.timer = setInterval(function () {
                a = (target - dom.offsetLeft) /
                    5; //The acceleration, magnitude and direction are all dynamically changed. The magnitude becomes smaller as the example target point gets closer. The acceleration is positive when the direction is smaller than the target point, and the acceleration is negative when it is greater than the target point.
                iSpeed = iSpeed + a;
                iSpeed *= u;
                if (Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {
                    clearInterval(dom.timer);
                    dom.style.left = target;
                } else {
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            }, 30)
        }
    </script>
</body>

</html>

Case realization of elastic movement

Case description: Implement a navigation bar so that the effect of elastic movement can be achieved when the mouse is moved in.
Display of results

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Case realization of elastic movement</title>
    <style>
        * {
            margin: 0;
            padding: 0;

            list-style: none;
        }

        ul {
            width: 800px;
            height: 100px;

            position: relative;

            margin: 100px auto;
        }

        ul .element {
            width: 198px;

            height: 98px;
            line-height: 98px;
            text-align: center;

            float: left;

            border: 1px solid black;
            background-color: orange;
        }

        ul .special {
            width: 200px;
            height: 100px;
            background-color: deeppink;
            /* Set absolute positioning to be free between the li below the ul */
            position: absolute;
            left: 0;
            top: 0;
            /* Set the transparency so that the special after becoming absolutely positioned will not cover the text, and the hover effect can be cleverly achieved (through color mixing) */
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <ul>
        <li class="element">HTML</li>
        <li class="element">CSS</li>
        <li class="element">JAVASCRIPT</li>
        <li class="element">ECMASCRIPT6</li>
        <li class="special"></li>

        <script>
            var oLiArray = document.getElementsByClassName('element');
            var special = document.getElementsByClassName('special')[0];

            for(var i = 0;i<oLiArray.length;i++){
                oLiArray[i].onmouseenter = function(){
                    console.log(1);
                    startMove(special,this.offsetLeft);
                }

            }
            function startMove(dom, target) {

                clearInterval(dom.timer);

                // assign initial value
                var iSpeed = 0; //initial speed
                var a = 3;
                var u = 0.8; //friction

                // Change the movement of the dom through a timer
                dom.timer = setInterval(function () {
                    a = (target - dom.offsetLeft) /
                        5; //The acceleration, magnitude and direction are all dynamically changed. The magnitude becomes smaller as the example target point gets closer. The acceleration is positive when the direction is smaller than the target point, and the acceleration is negative when it is greater than the target point.
                    iSpeed = iSpeed + a;
                    iSpeed *= u;
                    if (Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {
                        clearInterval(dom.timer);
                        dom.style.left = target;
                    } else {
                        dom.style.left = dom.offsetLeft + iSpeed + 'px';
                    }
                }, 30)
            }
        </script>
    </ul>
</body>

</html>

Tags: Javascript

Posted by MikeNye on Wed, 11 May 2022 19:20:59 +0300