菜鸟教程
教程 animejs tutorial

循环与方向

Anime.js 支持灵活的循环和动画方向设置，让动画表现更加丰富多变。

循环（loop）

  • loop: true 表示无限循环
  • loop: n 表示循环 n 次
  • 默认不循环
js 
anime({
  targets: ".box",
  translateX: 200,
  loop: 3,
  duration: 1000,
});

播放方向（direction）

可设置动画播放方向：

  • normal 正常播放（默认）
  • reverse 反向播放
  • alternate 正反交替播放
js 
anime({
  targets: ".box",
  translateX: 200,
  direction: "alternate",
  loop: true,
  duration: 1000,
});

结合使用

循环与方向常结合使用，实现持续的往返动画效果。

小结

灵活运用循环和方向参数，能显著增强动画的表现力和交互感。

示例演示

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Anime.js 循环与方向示例</title>
<style>
.box {
width: 60px;
height: 60px;
background-color: #4FC08D;
margin: 30px;
border-radius: 6px;
display: inline-block;
user-select: none;
}
</style>
</head>


<body>
<div class="box"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
anime({
targets: ‘.box’,
translateX: 250,
direction: ‘alternate’,
loop: true,
duration: 1000,
easing: ‘easeInOutSine’
});
</script>
</body>


</html>

相关内容