调试技巧

动画调试能帮助你快速定位问题，优化动画效果。下面介绍几种实用的方法：

1. 利用回调函数打印动画进度

Anime.js 提供了多种回调函数，如 begin、update、complete，可在其中打印动画状态。

js

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  update: function(anim) {
    console.log('动画进度:', anim.progress.toFixed(2), '%');
  }
});

2. 暂停和恢复动画

动画实例支持 .pause() 和 .play() 方法，方便在调试时控制动画进度。

3. 监控当前所有动画实例

anime.running 数组包含当前所有运行中的动画，便于调试动画状态。

4. 简化动画步骤

将复杂动画拆分为简单步骤，逐步排查问题。

示例演示

loading

说明

动画方块左右往返移动；
页面和控制台实时输出动画进度；
“暂停动画”和“继续动画”按钮，方便调试动画播放状态；
使用立即执行函数避免变量污染和重复声明。 rgb(240, 240, 240)rgba(240, 240, 240, 0.75)