JavaScript to achieve uniform animation effect

This article example shares the specific code for implementing uniform speed animation in javascript for your reference. The specific content is as follows

Implementation ideas:

1. Mainly use the timing function setInterval() to achieve animation effects
2. You can encapsulate the animation into a function so that it can be called by multiple elements without having to write it repeatedly
3. Animation function receives parameters - element object, target offset, callback function ① Add a timing function in the function, give the timing function a name, and use the timing function name to clear the timing function later ② Processing program in the timing function:
a. Give a fixed step movement value and set the offset of the element object to change at a uniform speed - - -eg: obj.style.left = obj.offsetLeft + 5 + 'px';
b. Determine whether the offset reaches the target value, and if so, stop the animation - - -
clearInterval(obj.timer);
And when the animation stops, determine whether there is a callback function, and if there is a callback function, execute the callback function
4. Add a clear timer function at the front of the animation function to clear the previous animation effect - - -clearInterval(obj.timer);
Sometimes you need to click a button to trigger an animation. If you don't add a clear button, the animation effect will be superimposed and get faster and faster if you click the button repeatedly.
5. You can also encapsulate the animation function into a js file for reference

Tip: The above is just one method. Different animation effects can be adjusted according to the needs.

Code example:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uniform Animation</title>
    <style>
        .box {
            position: relative;
            width: 1000px;
            margin-top: 20px;
        }
        
        .xiaohuli {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }
        
        .pikaqiu {
            position: absolute;
            top: 150px;
            left: 0;
            width: 200px;
            height: 150px;
        }
    </style>
</head>

<body>
    <button class="btn1">Click to move the little fox</button>
    <button class="btn2">Click to move Pikachu</button>
    <div class="box">
        <img src="images/little fox.jpg" alt="" class="xiaohuli">
        <img src="images/Pikachu.jpg" alt="" class="pikaqiu">
    </div>
    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var xiaohuli = document.querySelector('.xiaohuli');
        var pikaqiu = document.querySelector('.pikaqiu');

        btn1.addEventListener('click', function() {
            animate(xiaohuli, 300);
        })

        btn2.addEventListener('click', function() {
            animate(pikaqiu, 450);
        })

        // animation function obj animation object, target target left offset, callback callback function function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {

                obj.style.left = obj.offsetLeft + 5 + 'px';

                if (obj.offsetLeft >= target) {
                    // Stop animation clearInterval(obj.timer);
                    // If there is a callback function, execute the callback function if (callback) {
                        callback();
                    }
                }


            }, 30);
        }
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS div uniform speed movement animation and variable speed movement animation code examples
JS implements uniform and slow motion animation effect encapsulation example
Detailed explanation of offset and uniform animation in JS
Detailed explanation of javascript uniform animation and buffer animation
Native JS to achieve uniform image carousel animation
Native javascript realizes uniform motion animation effect

<<: Use of MySQL DDL statements

>>: Docker data volume container creation and usage analysis