Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.