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

MySQL Daemon failed to start error solution

MySQL Daemon failed to start error solution A few...

Basic security settings steps for centos7 server

Turn off ping scanning, although it doesn't h...

The difference and usage of single-line and double-line layout in Flex mobile layout

Here is a single-line layout using ul>li for l...

How to configure Hexo and GitHub to bind a custom domain name under Windows 10

Hexo binds a custom domain name to GitHub under W...

How does MySQL ensure data integrity?

The importance of data consistency and integrity ...

A brief analysis of JS original value and reference value issues

Primitive values ​​-> primitive types Number S...

How to use Maxwell to synchronize MySQL data in real time

Table of contents About Maxwell Configuration and...

MySQL complete collapse: detailed explanation of query filter conditions

Overview In actual business scenario applications...

Detailed explanation of how to cleanly uninstall Docker

First, the server environment information: Reason...

Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

Effect picture (if you want a triangle, please cl...

Detailed steps for building, running, publishing, and obtaining a Docker image for the first time

1. Introduction In the past, if you wanted to sta...

Building command line applications with JavaScript

Table of contents 1. Install node 2. Install Comm...

How to build a complete samba server in Linux (centos version)

Preface smb is the name of a protocol that can be...

js uses cookies to remember user page operations

Preface During the development process, we someti...

win10 mysql 5.6.35 winx64 free installation version configuration tutorial

mysql 5.6.35 winx64 free installation version con...