【Anime.js】——Understanding of Anime.js source code engine

1. Overall structure of Anime.js

The power of Anime.js is that the amount of code is very small, but the function is very powerful. Let's explore the core of Anime.js source code~

The main reason why Anime.js is so powerful is that its code structure is designed very cleverly and reasonably, so if we want to master the core of Anime.js, we must first understand its structure.

The structure of Anime.js is as follows:

The orange squares are APIs provided by the browser. The three blue squares below are the methods implemented by Anime.js itself.

We will interpret and implement them one by one below.

---

 2. Implementation of Anime.js——engine() engine

first understand what isrequestAnimationFrame（）方法

grammar:

window.requestAnimationFrame(callback);

  window.requestAnimationFrame(callback) Tell the browser - you want to perform an animation, and ask the browser to call the specified callback function to update the animation before the next redraw.

This method needs to pass in a callback function callbackas a parameter, and the callback function will be executed before the browser redraws next time.

callback内部还接受一个参数，该参数表示开始去执行回调函数的时刻。

Note:  If you want to continue to update the next frame of animation before the browser redraws next time, the callback function itself must be called again window.requestAnimationFrame()

 That is to say:

window.requestAnimationFrame()是创建了一个方法去等待执行。

Since there is waiting, there will also be cancellations. window.cancelAnimationFrame()  to cancel the callback function.window.requestAnimationFrame()会返回一个ID，将这个ID传给window.cancelAnimationFrame()。

The implementation of engine() engine:

Why use closures?

The method of the engine engine and the method of animation anime are not put together, so that we can call the anime method multiple times, which means that calling an anime method is aimed at one engine, but they all call the same method, so how? What is the difference? Using closures, you can create different memory blocks , so that different anime methods correspond to different engines.

Effect: