---
name: "Animation"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "Animation - 动画实例"
---

## Animation

> [VERSION] 基础库 >= 2.21.8

### 描述

动画实例，用于创建和描述动画效果。通过调用实例方法来描述动画，最后通过 export 方法导出动画数据传递给组件的 animation 属性

### 参数

无


### 返回值

类型: `Animation`

Animation 实例

#### 方法

| 方法名 | 说明 |
| --- | --- |
| `export` | 导出动画队列。export 方法每次调用后会清掉之前的动画操作 |
| `step` | 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画 |
| `matrix` | 同 CSS transform matrix |
| `matrix3d` | 同 CSS transform matrix3d |
| `rotate` | 旋转一个角度，范围 -180~180 |
| `rotate3d` | 从固定轴顺时针旋转一个角度 |
| `rotateX` | 在 X 轴旋转一个角度 |
| `rotateY` | 在 Y 轴旋转一个角度 |
| `rotateZ` | 在 Z 轴旋转一个角度 |
| `scale` | 缩放 |
| `scale3d` | 3D 缩放 |
| `scaleX` | 缩放 X 轴 |
| `scaleY` | 缩放 Y 轴 |
| `scaleZ` | 缩放 Z 轴 |
| `skew` | 对 X、Y 轴坐标进行倾斜 |
| `skewX` | 对 X 轴坐标进行倾斜 |
| `skewY` | 对 Y 轴坐标进行倾斜 |
| `translate` | 平移变换 |
| `translate3d` | 3D 平移变换 |
| `translateX` | 对 X 轴平移 |
| `translateY` | 对 Y 轴平移 |
| `translateZ` | 对 Z 轴平移 |
| `opacity` | 设置透明度 |
| `backgroundColor` | 设置背景色 |
| `width` | 设置宽度 |
| `height` | 设置高度 |
| `left` | 设置 left 值 |
| `right` | 设置 right 值 |
| `top` | 设置 top 值 |
| `bottom` | 设置 bottom 值 |

### 示例代码

#### 基础用法

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