菜鸟教程
教程 animejs tutorial

页面加载动效

加载动效是网页交互体验中非常重要的细节。通过动画让用户感知「正在处理」的状态，可以有效减少等待焦虑，提升体验。

常见加载动画形式

  • 小球跳动（多个元素循环缩放或位移）
  • 线条伸缩、旋转
  • 循环帧动画（结合 SVG）

示例：三个小球循环跳动

js 
anime({
  targets: ".dot",
  translateY: [
    { value: -20, duration: 300 },
    { value: 0, duration: 300 },
  ],
  delay: anime.stagger(150, { start: 0, from: "first" }),
  loop: true,
  easing: "easeInOutSine",
});

该效果可模拟「加载中」状态，让页面在数据未到达前保持活跃感。

小结

加载动效能显著提升用户对系统响应的感知，应合理使用并保持简洁。

示例演示

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

<head>
<meta charset="UTF-8" />
<title>加载动效示例</title>
<style>
.loader {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100px;
gap: 8px;
margin-top: 60px;
}


.dot {
  width: 12px;
  height: 12px;
  background-color: #4FC08D;
  border-radius: 50%;
}



</style>
</head>


<body>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
anime({
targets: ‘.dot’,
translateY: [
{ value: -20, duration: 300 },
{ value: 0, duration: 300 }
],
delay: anime.stagger(150),
loop: true,
easing: ‘easeInOutSine’
});
</script>
</body>


</html>

相关内容