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 METADATA LOCK (MDL LOCK) MDL lock problem analysis

1. Introduction MDL lock in MYSQL has always been...

Vue form post request combined with Servlet to realize file upload function

Front-end test page code: <template> <di...

Using HTML to implement a voting website cheating scheme that restricts IP

This is a cheating scheme for voting websites wit...

The correct way to install MySQL using yum on Alibaba Cloud CentOS 7 (recommended)

yum quick install mysql Add yum repository rpm -U...

CentOS 8 officially released based on Red Hat Enterprise Linux 8

The CentOS Project, a 100% compatible rebuild of ...

Tutorial diagram of installing zabbix2.4 under centos6.5

The fixed IP address of the centos-DVD1 version s...

Solution for Docker container not recognizing fonts such as Songti

Problem background: When using docker to deploy t...

20 excellent foreign web page color matching cases sharing

This article collects 20 excellent web page color ...

Reasons and solutions for MySQL sql_mode modification not taking effect

Table of contents Preface Scenario simulation Sum...

Detailed explanation of the method of comparing dates in MySQL

If there is a table product with a field add_time...

When setting up Jenkins in Docker environment, the console log shows garbled Chinese characters when building tasks

Table of contents 1. Problem description: 2. Trou...

How to generate mysql primary key id (self-increment, unique and irregular)

Table of contents 1. Use the uuid function to gen...

Docker deployment springboot project example analysis

This article mainly introduces the example analys...

Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox

I like to pay attention to some news on weekdays a...

How to find websites with SQL injection (must read)

Method 1: Use Google advanced search, for example...