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

Property	Type	Required	Description
delay	number	No	Animation delay time (in ms)
duration	number	No	Animation duration (in ms)
timingFunction	"linear" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-start" | "step-end"	No	Animation effect
transformOrigin	string	No

timingFunction

Property	Description
linear	The animation keeps the same speed from start to end
ease	The animation starts slow, then speeds up, and then slows down before ending.
ease-in	The animation starts at low speed
ease-in-out	The animation starts and ends at low speed
ease-out	The animation ends at low speed
step-start	The first frame of the animation jumps to the end state until the animation ends
step-end	The 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

API	WeChat Mini-Program	H5	React Native
Taro.createAnimation	✔️	✔️