---
name: "Animation.step"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "Animation.step - 表示一组动画完成"
---

## Animation.step

> [VERSION] Base Library >= 2.21.8

### 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

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `options` | `StepOption` | No | Animation step configuration |

### Return Value

Type: `Animation`

Animation instance

### Referenced Types

##### `interface` StepOption

| Property | Type | Description |
| --- | --- | --- |
| `duration` | `number` | Animation duration, in ms |
| `timingFunction` | `"linear" \| "ease" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "step-start" \| "step-end"` | Animation easing |
| `delay` | `number` | Animation delay, in ms |
| `transformOrigin` | `string` | Set transform-origin |


### Valid Values

##### `options.timingFunction` valid values

| Value | Description |
| --- | --- |
| `"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

```ts
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

```ts
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() });
  },
});
```