---
name: "Animation"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "Animation - 动画实例"
---

## Animation

> [VERSION] Base Library >= 2.21.8

### Description

Animation instance used to create and describe animation effects. Call instance methods to define the animation, then export the animation data with the export method and pass it to the component's animation property

### Parameters

None


### Return Value

Type: `Animation`

Animation instance

#### Methods

| Method | Description |
| --- | --- |
| `export` | Export the animation queue. Each call to export clears previous animation operations |
| `step` | 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 |
| `matrix` | Same as CSS transform matrix |
| `matrix3d` | Same as CSS transform matrix3d |
| `rotate` | Rotate by an angle, range -180~180 |
| `rotate3d` | Rotate clockwise by an angle around a fixed axis |
| `rotateX` | Rotate by an angle around the X axis |
| `rotateY` | Rotate by an angle around the Y axis |
| `rotateZ` | Rotate by an angle around the Z axis |
| `scale` | Scale |
| `scale3d` | 3D scaling |
| `scaleX` | Scale the X axis |
| `scaleY` | Scale the Y axis |
| `scaleZ` | Scale the Z axis |
| `skew` | Skew along the X and Y axes |
| `skewX` | Skew along the X axis |
| `skewY` | Skew along the Y axis |
| `translate` | Translation |
| `translate3d` | 3D translation |
| `translateX` | Translate along the X axis |
| `translateY` | Translate along the Y axis |
| `translateZ` | Translate along the Z axis |
| `opacity` | Set opacity |
| `backgroundColor` | Set background color |
| `width` | Set width |
| `height` | Set height |
| `left` | Set left value |
| `right` | Set right value |
| `top` | Set top value |
| `bottom` | Set bottom value |

### Examples

#### Basic usage

```ts
Page({
  data: {
    animationData: {},
  },
  onReady() {
    this.animation = ty.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
  },
  handleTap() {
    this.animation.scale(2, 2).rotate(45).step();
    this.setData({ animationData: this.animation.export() });
  },
});
```