菜鸟教程
教程 animejs tutorial

基本参数设置

Anime.js 提供丰富的参数选项来控制动画的细节，以下是最常用的基本参数：

duration （动画持续时间）

动画执行的总时间，单位是毫秒，默认 1000。

js 
anime({
  targets: ".box",
  translateX: 200,
  duration: 1500,
});

delay （延迟执行时间）

动画开始前的等待时间，单位毫秒。

js 
anime({
  targets: ".box",
  translateX: 200,
  delay: 500,
});

easing （缓动函数）

控制动画的速度曲线，内置多种缓动效果，例如：

  • linear 线性
  • easeInQuad 加速
  • easeOutBounce 弹跳等

示例：

js 
anime({
  targets: ".box",
  translateX: 200,
  easing: "easeInOutQuad",
});

loop （循环次数）

是否循环执行动画。可以设置：

  • true 无限循环
  • 数字 n 表示循环 n 次
js 
anime({
  targets: ".box",
  translateX: 200,
  loop: 3,
});

direction （播放方向）

控制动画播放方向，有：

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

autoplay （自动播放）

是否在创建动画后自动播放，默认 true。设置为 false，需手动调用 play()。

js 
const animation = anime({
  targets: ".box",
  translateX: 200,
  autoplay: false,
});
animation.play();

easing 函数自定义

除了字符串缓动函数，支持传入自定义函数控制进度。

小结

掌握这些基础参数，有助于灵活调整动画时机和效果，满足复杂交互需求。

示例演示

在线代码演示
源码 
<!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;
display: inline-block;
border-radius: 6px;
}
</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,
duration: 1500,
delay: 500,
easing: ‘easeInOutQuad’,
direction: ‘alternate’,
loop: true
});
</script>
</body>


</html>

相关内容