JavaScript to achieve uniform animation effect

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

Recommend

Detailed tutorial on installing nacos in docker and configuring the database

Environment Preparation Docker environment MySQL ...

Detailed tutorial of pycharm and ssh remote access server docker

Background: Some experiments need to be completed...

How to use Xtrabackup to back up and restore MySQL

Table of contents 1. Backup 1.1 Fully prepared 1....

Vuex implements simple shopping cart function

This article example shares the specific code of ...

Detailed explanation of Js class construction and inheritance cases

The definition and inheritance of classes in JS a...

Solution to Vue3.0 error Cannot find module'worker_threads'

I'll record my first attempt at vue3.0. When ...

Solution to the problem that mysql local login cannot use port number to log in

Recently, when I was using Linux to log in locall...

Sample code for easily implementing page layout using flex layout

Without further ado, let's get straight to th...

A brief discussion on the design of Tomcat multi-layer container

Table of contents Container Hierarchy The process...

In-depth analysis of the slow query problem of MySQL Sending data

Through an example, I shared with you the solutio...

js to implement collision detection

This article example shares the specific code of ...

Let's talk in detail about the props attributes of components in Vue

Table of contents Question 1: How are props used ...

Three ways to implement waterfall flow layout

Preface When I was browsing Xianyu today, I notic...

How to implement insert if none and update if yes in MySql

summary In some scenarios, there may be such a re...