How to use animateplus Animation Module
This article mainly introduces "how to use animateplus animation module". In daily operation, I believe many people have doubts about how to use animateplus animation module. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use animateplus animation module". Next, please follow the editor to study!
AnimatePlus is a JavaScript animation library that focuses on performance and creative flexibility. It is designed to provide stable 60FPS that weighs less than 3KB (shrink and compress), making it particularly suitable for mobile devices. Animateplus_ is an animation module based on the current network.
The use of animateplus Animation Module
Importanimatefrom "/ animateplus.js"
Animate ({
Elements: "div"
Duration:2000
Delay:index= > index*100
Transform: ["scale (0)", "scale (1)"]
})
Then (options= > animate ({
... options
Transform: ["translate (0)", "translate (500%)"]
}))
Parameter interpretation of animateplus Animation Module
The animate () method has several important parameters, and let's take a look at what these parameters do.
The default value of the elements parameter is null, which can have four types, namely: string | Element | NodeList | Array.
Determine the DOM element to animate. You can pass a CSS selector or DOM element.
Animate ({
Elements:document.body.children
Transform: ["rotate (0turn)", "rotate (1turn)"]
})
The default value of the easing parameter is out-elastic, and the parameter type is a string. Its main function is to determine the acceleration curve of the animation.
The main values are shown in the following table:
Constant accelerate decelerate accelerate-decelerate
Linear in-cubic out-cubic in-out-cubic
In-quartic out-quartic in-out-quartic
In-quintic out-quintic in-out-quintic
In-exponential out-exponential in-out-exponential
In-circular out-circular in-out-circular
In-elastic out-elastic in-out-elastic
The amplitude and period of elastic relaxation can be configured by providing spatial separation values. The amplitude defaults to 1, and the period is 0.4.
At this point, the study on "how to use the animateplus animation module" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
