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

JavaScript+HTML to implement student information management system

Table of contents 1. Introduction 2. Rendering 3....

Understanding MySQL deadlock routines through unique index S lock and X lock

In Beginners' Understanding MySQL Deadlock Pr...

Graphical introduction to the difference between := and = in MySQL

The difference between := and = = Only when setti...

Summary of JavaScript's setTimeout() usage

Table of contents 1. Introduction 2. The differen...

How to change the website accessed by http to https in nginx

Table of contents 1. Background 2. Prerequisites ...

JavaScript Basics: Immediate Execution Function

Table of contents Immediately execute function fo...

Ideas and codes for implementing iframe to intercept part of the website content

Copy code The code is as follows: <div style=&...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

Linux system (Centos6.5 and above) installation jdk tutorial analysis

Article Structure 1. Preparation 2. Install Java ...

Summary of basic usage of $ symbol in Linux

Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...

HTML realizes hotel screening function through form

<!doctype html> <html xmlns="http:/...

Detailed explanation of the implementation process of Nginx enabling Brotli compression algorithm

Preface In web applications, in order to save tra...

Sample code for testing technology application based on Docker+Selenium Grid

Introduction to Selenium Grid Although some new f...

Kali Linux installation VMware tools installation process and VM installation vmtools button gray

Xiaobai records the installation of vmtools: 1. S...

Reasons and solutions for slow MySQL query stuck in sending data

Because I wrote a Python program and intensively ...