动画控制函数

Anime.js 提供多种动画控制函数，允许你在运行时对动画进行暂停、播放、重启和反转等操作，增强动画的交互性。

常用控制函数

play() — 播放动画，如果已暂停则继续播放
pause() — 暂停动画
restart() — 从头重新开始动画
reverse() — 反转动画播放方向
seek(time) — 跳转动画到指定时间点（毫秒）

示例代码

js

const animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  autoplay: false
});

// 播放动画
animation.play();

// 暂停动画
// animation.pause();

// 反转动画
// animation.reverse();

// 重新开始动画
// animation.restart();

事件监听与控制结合

可以结合事件监听回调，动态控制动画状态。

小结

熟悉动画控制函数后，可以根据交互需求随时调整动画播放状态，提升用户体验。

示例演示

loading