An overview of the

First of all, JS animation is generally used in the rotation diagram of the left and right or up and down animation

Animation of uniform motion

<! DOCTYPE html> <html lang="en"> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 0; } </style> // first define timer, redefine ele.style.left <script> window.addeventListener ('load'.functionVar div = document.querySelector() {// the page is loaded.'div')


            functionAnimate (obj) {// Define the animation function obj.timer =setInterval(function() {// define timer obj.style.left = obj.offsetLeft + 10 +'px'; / / element on the left of the original value mobile}, 500)} the animate (div)}) < / script > < / head > < body > < div > < / div > < / body > < / HTMLCopy the code

You want the speed of the animation to decrease gradually and specify the distance of movement

    function animate(obj,target,callback) { 
       // Define the animation function
        clearInterval(obj.timer);    // Know the timer before setting it to prevent multiple timers from being enabled
        obj.timer = setInterval(function() { 
        /* Define timer obj. Timer Assigns the timer to the element object. Timer is an object property to save memory */

          var step=target-obj.offsetLeft>=0?Math.ceil((target-obj.offsetLeft)/10) :Math.floor( (target-obj.offsetLeft)/10)
          
            /* Specifies that the distance to be traveled each time is (target distance - current left value)/10
            if(obj.offsetLeft==target){
                clearInterval(obj.timer)   
                // When the motion reaches the target position, cancel the timer
                if(callback){
                   callback()               
                   // Call the callback function when the move animation completes
                }                                                      
            }
            obj.style.left = obj.offsetLeft + step+ 'px';
            // The left value of the element is moved
        }, 500)}})Copy the code

The js animation above achieves the horizontal movement of the specified element to the specified location. First, it ensures that the element to be moved is absolutely located. The element can use ele.offsetLeft to obtain its left distance from the location parent element /body, and use ele.style.left to give the element a new location Step is the distance of each move. For step, the value should be an integer so that the specified distance (from the left border of the parent element) can be reached, rounded up if step is positive and rounded down if step is negative

Vertical motion JS animation package

 // Real case: go back to the top of the page

    function animate(obj,target,callback) { // Define the animation function
        clearInterval(obj.timer);    // Know the timer before setting it to prevent multiple timers from being enabled
        obj.timer = setInterval(function() { // Define timer obj.timer Assigns the timer to the element object. Timer is an attribute of the object to save memory
            var step=(target-obj.pageYOffset)/10
            step=step>=0?Math.ceil(step): Math.floor(step)
            // Set the distance for each walk to be (target distance - current left value)/10
            if(obj.pageYOffset==target){
                clearInterval(obj.timer)   // When the motion reaches the target position, cancel the timer
                callback&& callback()               // Call the callback function when the move animation completes
            }
            window.scroll(0,obj.pageYOffset + step)   
            //window.sroll(x,y) determines how far the page moves up and down
        }, 500)
      }
    })

    animate(window.0)
Copy the code