使用 motion-anything 编写自定义动画脚本的步骤

用 motion-anything 编写自定义动画脚本，核心不是背诵函数名，而是先确认库暴露的根级创建函数，以及创建后拿到的动画实例。常见做法是传入一个已存在的 DOM 节点作为承载区域，返回的实例上挂着注册动画、播放、暂停、复位等控制入口；后续脚本都围绕这个实例展开。下面给出一套可直接运行的接入骨架，方法名以你安装版本的导出为准，先跑通再谈动画效果。

适用场景：页面中需要由脚本控制动效的播放、暂停、复位，并在动画结束后执行后续动作。操作动作：创建动画实例 → 注册动画对象 → 绑定按钮事件 → 挂接完成回调。验证方式：在浏览器控制台打印实例方法和动画状态，观察状态值变化与元素位置变化。风险边界：不同版本的导出名和参数结构存在差异，直接套用前要用 console 核对实际方法名。

引入 motion-anything 并初始化一个画布

因为库不会自动寻找页面元素，所以先准备一个承载节点，比如 div 或 canvas。把节点传给创建函数，即可获得一个动画实例。

import { createMotion } from 'motion-anything';

const stage = document.getElementById('stage');
const motion = createMotion({ target: stage, width: 320, height: 240 });

这里的 createMotion 是通用写法。不同版本可能改用 initMotion 或直接引入一个 Motion 类；拿到返回实例后，先打印实例的键名，确认可用的方法再继续，能减少一半排查时间。

注册动画对象并绑定更新函数

动画真正动起来依靠两步：把元素注册成一个动画对象，并在更新回调里修改它的样式。更新回调每一帧收到一个 0 到 1 的进度值，直接用这个值计算位移、透明度或旋转角。

const ball = motion.register({
  type: 'element',
  initial: { x: 0, y: 0 },
  duration: 1600,
  easing: 'ease-out',
  update: (object, progress) => {
    object.style.transform = 'translate(' + progress * 200 + 'px, 0)';
  }
});

register 若不存在，换成 add 或 create 等同类方法。注册成功后返回的 ball 是后续所有控制的句柄；若返回 undefined，优先检查 initial 和 duration 是否遗漏，type 字段是否用了库没有预设的值。

通过事件控制播放、暂停与复位

拿到动画对象句柄后，把播放、暂停、复位绑定到页面按钮。这些控制方法通常直接改变内部状态，并在下一帧反映到 DOM 上。

document.getElementById('btn-play').addEventListener('click', () => ball.play());
document.getElementById('btn-pause').addEventListener('click', () => ball.pause());
document.getElementById('btn-reset').addEventListener('click', () => ball.reset());

绑定后先观察按钮点击时元素是否位移、停住、回到起点。若控制方法不存在，在控制台打印 ball 找接近的方法名；动画未启动时调用 pause 被忽略属于正常行为。reset 会把进度恢复到 0，元素位置因此回到起点。

设置动效完成后的回调逻辑

动画结束后的后续动作，通过完成事件挂接比较稳。方法名常见的是 onComplete、onFinish 或 once；如果库没有独立事件，也可以在更新回调里判断 progress 等于 1 时执行同一段逻辑。

ball.onComplete(() => {
  console.log('[motion-anything] animation completed');
  document.getElementById('status').textContent = 'done';
});

完成回调里避免执行重任务。如果一段动画会被多次播放，每次播放都可能触发一次回调，日志里出现重复完成记录时可据此排查，不要在完成回调里反复注册新的监听。

在控制台验证脚本调用结果

打开浏览器控制台，按下面顺序逐项检查。

页面加载后执行 console.log(motion) 和 console.log(ball)，确认实例上存在播放、暂停、复位方法以及状态字段。
点击播放按钮，执行 console.log(ball.state)，预期从初始状态切换为播放中，动画结束后变为完成状态。状态字段的具体名称以实际输出为准，可能是 running、playing 或 active。
点击暂停按钮，元素停在当前帧的位置，state 对应切到暂停值。
点击复位按钮，元素回到初始坐标，控制台出现完成日志的次数与正常播放结束次数一致。
若更新回调里设置了 transform 但元素没动，检查该元素是否有其他 CSS 覆盖 transform，以及传入的对象是否真的是 DOM 节点。

验证能证明脚本控制链路是通的；动画节奏和视觉效果是否达到预期，仍需人工观察每一帧过渡。遇到进度跳变或首帧闪烁，优先检查初始值和 easing 参数的取值。