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.
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 | ✔️ | ✔️ |