如何封装与扩展

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

1. 封装动画函数

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

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

调用：

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

2. 利用 Promise 处理动画顺序

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

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. 扩展动画效果

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

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。