title: Taro.createAnimation(option)

sidebar_label: createAnimation

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

  1. (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

  1. var animation = Taro.createAnimation({
  2.   transformOrigin: "50% 50%",
  3.   duration: 1000,
  4.   timingFunction: "ease",
  5.   delay: 0
  6. })

API Support

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