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

## createAnimation

> [VERSION] Base Library >= 2.21.8

### Description

Create an Animation instance. Use the instance methods to describe the animation, then export the data with the instance's export method and pass it to the component's animation property

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `option` | `CreateAnimationOption` | No | Animation configuration |

### Return Value

Type: `Animation`

Animation instance [Animation](/en/miniapp/develop/miniapp/api/ui/animation/Animation)

### Referenced Types

##### `interface` CreateAnimationOption

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


### Valid Values

##### `option.timingFunction` valid values

| Value | Description |
| --- | --- |
| `"linear"` | Animation runs at a constant speed from start to finish |
| `"ease"` | Animation starts slowly, accelerates, then slows before ending |
| `"ease-in"` | Animation starts slowly |
| `"ease-out"` | Animation ends slowly |
| `"ease-in-out"` | Animation starts and ends slowly |
| `"step-start"` | Animation jumps to the end state on the first frame and stays until it finishes |
| `"step-end"` | Animation stays at the initial state and jumps to the end state on the last frame |


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

#### Multi-step animation

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

#### Custom easing and delay

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