“This is the fourth day of my participation in the August Gwen Challenge.

RequestAnimationFrame = requestAnimationFrame = requestAnimationFrame

The simplest use of requestAnimationFrame

RequestAnimationFrame is similar to setInterval, but written differently. It is written in a way similar to the following:

//1. Execute animation
function start(){
   requestAnimationFrame(loop)
}
// 2. Animation loop
function loop(){
    animateLogic()
    requestAnimationFrame(loop)
}
//3. Animation specific logic
function animateLogic(){
    // Write the specific logic of the animation here, either to process the position information of the element, or to modify some data (frameworks for data-driven views, such as vue,react).
    console.log(+new Date()}Copy the code

Call start() to start the animation, and then recursively execute the loop, which executes the animation about 16ms. You can check the printed content in the console, or modify the code in the animateLogic to manipulate the properties of a DOM element to see the effect.

Now, if you’re new to this, you might be wondering if this is going to cause stack overflow, if this is going to cause performance issues, why you don’t use setInterval, how do browsers guarantee the performance of this API, Have confused people look at this article: stackoverflow.com/questions/3…

Now that you’ve implemented the simplest usage, move on to the next problem

The above animation is too fast. How do I control the animation interval

What if I want the animation to run every 1000ms?

First requestAnimationFrame(callback), callback will have a parameter that represents the currentTime currentTime, we define an interval duration, define a variable nextTime that represents the nextTime the animation will be executed.

In each animation loop, determine whether currentTime is greater than or equal to nextTime, if so, execute animation logic, otherwise directly to the next animation loop, code as follows:

let nextTime=0  // Start time of the next animation execution
let duration=1000 // The animation interval is 1000ms

//1. Execute animation
function start(){
   requestAnimationFrame(loop)
}
// 2. Animation loop
function loop(currentTime){
    if(currentTime<nextTime){
        requestAnimationFrame(loop)
        return 
    }
    nextTime=currentTime+duration

    animateLogic()
    requestAnimationFrame(loop)
}
// Animation logic
function animateLogic(){
    // Write the specific logic of the animation here, either to process the position information of the element, or to modify some data (for data-driven view scenarios, such as vue,react).
    console.log(+new Date()}Copy the code

You can perform the above code to see the console print

Now, the next question,

How do I stop the animation

The simplest way to do this is to define a variable pause that controls whether the animation stops

let nextTime=0  // Start time of the next animation execution
let duration=1000 // The animation interval is 1000ms

let pause=false // Define variables to control animation state
//1. Execute animation
function start(){
    pause=false
   requestAnimationFrame(loop)
}
function stop(){
    pause=true
}
// 2. Animation loop
function loop(currentTime){
    if(currentTime<nextTime){
        requestAnimationFrame(loop)
        return 
    }
    nextTime=currentTime+duration
    if(! pause){ animateLogic() } requestAnimationFrame(loop) }// Animation logic
function animateLogic(){
    // Write the specific logic of the animation here, either to process the position information of the element, or to modify some data (for data-driven view scenarios, such as vue,react).
    console.log(+new Date()}Copy the code

In addition, the browser also provide another API, cancelAnimationFrame used to cancel the animation, but with a bit of trouble, refer to the following article: stackoverflow.com/questions/1…

Basic use so far, the next article to write some practical application.

see you.