Animation.step

Requires:

Base Library≥2.21.8

Method signature

Animation.step(options?: )

Description

Marks completion of a group of animations. You can call any number of animation methods within a group; all animations in a group start simultaneously, and the next group runs only after the current one completes

Parameters

Parameter	Type	Required	Description
		No	Animation step configuration

Return Value

Type: Animation

Animation instance

Valid Values

`StepOption.timingFunction`

Value	Description	Since
`linear`	The animation runs at a constant speed from start to finish	-
`ease`	The animation starts slowly, then accelerates, and slows down before ending	-
`ease-in`	The animation starts slowly	-
`ease-out`	The animation ends slowly	-
`ease-in-out`	The animation starts and ends slowly	-
`step-start`	The animation jumps to the end state on the first frame and stays there until it ends	-
`step-end`	The animation stays at the start state and jumps to the end state on the last frame	-

Examples

Single-step animation

Page({
  data: {
    animationData: {},
  },
  onReady() {
    const animation = ty.createAnimation({ duration: 500 });
    animation.rotate(45).scale(2, 2).step();
    this.setData({ animationData: animation.export() });
  },
});

Multi-step animation and custom configuration

Page({
  data: {
    animationData: {},
  },
  onReady() {
    const animation = ty.createAnimation({ duration: 500 });
    animation.translate(100, 0).step();
    animation.rotate(180).step({ duration: 1000, timingFunction: 'ease-in' });
    this.setData({ animationData: animation.export() });
  },
});