Skip to main content
Version: Next

Taro.createAnimation(option)

Create an animation instance animation. Describe the animation by calling the instance. Use the method of exporting the animation instance to export the animation data and pass it to the animation property of the component.

Reference

Type

(option: Option) => Animation

Parameters

Option

PropertyTypeRequiredDescription
delaynumberNoAnimation delay time (in ms)
durationnumberNoAnimation duration (in ms)
timingFunction"linear" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-start" | "step-end"NoAnimation effect
transformOriginstringNo

timingFunction

PropertyDescription
linearThe animation keeps the same speed from start to end
easeThe animation starts slow, then speeds up, and then slows down before ending.
ease-inThe animation starts at low speed
ease-in-outThe animation starts and ends at low speed
ease-outThe animation ends at low speed
step-startThe first frame of the animation jumps to the end state until the animation ends
step-endThe animation remains the start state until the final frame jumps to the end state

Sample Code

var animation = Taro.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})

API Support

APIWeChat Mini-ProgramH5React Native
Taro.createAnimation✔️✔️