当前位置：网站首页>JS slow motion animation principle teaching (super detail)

JS slow motion animation principle teaching (super detail)

2022-07-07 13:21:00 【Zhou million】

1、 Write first html and css style , 

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .ha {
            position: absolute;
            top: 300px;
            left: 400px;
            width: 200px;
            height: 200px;
            background-color: purple;
            color: aliceblue;
        }
        
        body {
            height: 1000px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">gump Move the box to 100</div>
    <div class="gump">gump Move the box to 500</div>

The effect is shown in the figure ： The important thing is to learn js technology , It doesn't matter whether the style is good-looking or not ~

 2、 Next write js, I wrote it directly below , So it's no use load

3、 Encapsulate an animation function , Add click event , Call animation function in event , Click two boxes to realize gradient animation

4、 The explanation is super detailed , There are comments that need to be discussed ~

<script>
        var box = document.querySelector('.box');
        var gump = document.querySelector('.gump');
        // Function encapsulates a gradient animation
        function animate(obj, target) {
            // Let there always be only one timer in the function
            clearInterval(obj.timer);
            obj.timer = window.setInterval(function() {
                // If you reach the target position, stop （ Clear timer ）
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                }
                // The timer is recalculated every time it is called step The length of , The target length remains unchanged , The current position is getting closer and closer to the target
                // The absolute value of the difference between them is getting smaller and smaller , Reduce the length of each step in the interval , Realize the slowing effect
                // First step ：（500-100）/10 = 40   The second step ：（500-140）/10 = 36 ......
                var step = (target - obj.offsetLeft) / 10;
                // If the step size is positive , Take a larger integer ; If the step size is negative , Take the smaller integer . The purpose is to take the larger absolute value
                step > 0 ? step = Math.ceil((step)) : step = Math.floor(step);
                // obj.style.left read-write , But you can only get the style in the line , So it's used to ” Write ” Excellent data
                // obj.offsetLeft Only read , But he can read in-line patterns , embedded style , Outer chain style ,” read ” Excellent data
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 20);
        }

        var box1 = box.addEventListener('click', function() {
            animate(gump, 100);

        })
        var box2 = gump.addEventListener('click', function() {
            animate(gump, 500);

        })
    </script>

原网站

版权声明
本文为[Zhou million]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207071110499526.html

边栏推荐

猜你喜欢

随机推荐