# 如何封装与扩展

URL: https://caijiao.org/animejs/8-summary/3-extend
Source: docs/animejs/8-summary/3-extend.md
Description: 本节介绍如何封装 Anime.js 动画逻辑以复用，并讲解如何扩展动画效果实现定制化功能。

在实际项目中，封装动画逻辑可以提升代码复用性和维护性。扩展动画则可实现更丰富的效果。

## 1. 封装动画函数

将动画配置封装为函数，方便多处调用和参数复用。

```js
function createSlideAnimation(target, distance, duration = 1000) {
  return anime({
    targets: target,
    translateX: distance,
    duration: duration,
    easing: "easeInOutQuad",
  });
}
```

调用：

```js
const animation = createSlideAnimation(".box", 250);
animation.play();
```

## 2. 利用 Promise 处理动画顺序

封装函数返回 Promise，方便链式调用。

```js
function slide(target, distance) {
  return anime({
    targets: target,
    translateX: distance,
    duration: 800,
    easing: "easeOutExpo",
  }).finished;
}

// 使用 async/await 顺序执行
async function runAnimations() {
  await slide(".box1", 200);
  await slide(".box2", 200);
}
runAnimations();
```

## 3. 扩展动画效果

通过自定义动画属性或结合其它库，实现个性化效果。

## 示例演示

[在线代码演示](/animejs/demos/23.html)