主题
动画控制函数
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();事件监听与控制结合
可以结合事件监听回调,动态控制动画状态。
小结
熟悉动画控制函数后,可以根据交互需求随时调整动画播放状态,提升用户体验。
示例演示
示例无法以 iframe 加载(请检查路径或将 demo 放到 public/)。