---
name: "createAnimation"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "ty.createAnimation - 创建一个动画实例 animation"
---

## createAnimation

> [VERSION] 基础库 >= 2.21.8

### 描述

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

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `option` | `CreateAnimationOption` | 否 | 动画配置 |

### 返回值

类型: `Animation`

Animation 实例 [Animation](/cn/miniapp/develop/miniapp/api/ui/animation/Animation)

### 引用对象

##### `interface` CreateAnimationOption

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `duration` | `number` | 动画持续时间，单位 ms |
| `timingFunction` | `"linear" \| "ease" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "step-start" \| "step-end"` | 动画的效果 |
| `delay` | `number` | 动画延迟时间，单位 ms |
| `transformOrigin` | `string` | 设置 transform-origin |


### 合法值

##### `option.timingFunction` 合法值

| 值 | 说明 |
| --- | --- |
| `"linear"` | 动画从头到尾的速度是相同的 |
| `"ease"` | 动画以低速开始，然后加快，在结束前变慢 |
| `"ease-in"` | 动画以低速开始 |
| `"ease-out"` | 动画以低速结束 |
| `"ease-in-out"` | 动画以低速开始和结束 |
| `"step-start"` | 动画第一帧就跳至结束状态直到结束 |
| `"step-end"` | 动画一直保持开始状态，最后一帧跳到结束状态 |


### 示例代码

#### 基础用法

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

#### 多步骤动画

```js
Page({
  data: {
    animationData: {},
  },
  onReady() {
    this.animation = ty.createAnimation({ duration: 500 });
  },
  handleTap() {
    this.animation
      .translate(100, 0).step()
      .rotate(180).step()
      .scale(0.5).opacity(0.5).step();
    this.setData({ animationData: this.animation.export() });
  },
});
```

#### 自定义缓动与延迟

```js
Page({
  data: {
    animationData: {},
  },
  onReady() {
    const animation = ty.createAnimation({
      duration: 800,
      timingFunction: 'ease-in-out',
      delay: 200,
      transformOrigin: '0 0 0',
    });
    animation.translateX(150).rotateZ(90).step();
    this.setData({ animationData: animation.export() });
  },
});
```