菜鸟教程
教程 animejs tutorial

复杂入场动画

在页面首次加载、组件切换或弹窗显示时，通常会用到 复杂入场动画。通过 Anime.js 的 timeline、stagger、transform 等功能，我们可以构建顺序、层级、多重效果的入场过渡。

动画组合技巧

  • translateX / Y: 平移入场
  • opacity: 淡入
  • scale: 缩放弹出
  • delay 或 anime.stagger: 顺序错位播放
  • timeline: 多动画流程组合

示例：卡片元素依次弹入

js 
anime({
  targets: ".item",
  translateY: [50, 0],
  opacity: [0, 1],
  scale: [0.8, 1],
  delay: anime.stagger(150),
  duration: 800,
  easing: "easeOutBack",
});

小结

结合多个属性和时间控制，Anime.js 能帮助你快速实现复杂而自然的入场动画，常用于页面主视觉、组件过渡等。

示例演示

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

<head>
<meta charset="UTF-8" />
<title>复杂入场动画</title>
<style>
body {
font-family: sans-serif;
background: #f9f9f9;
padding: 40px;
text-align: center;
}


.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  width: 100px;
  height: 100px;
  background: #4FC08D;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(50px) scale(0.8);
}

#startBtn {
  margin-top: 30px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4FC08D;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#startBtn:hover {
  background-color: #3a9d6f;
}



</style>
</head>


<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>


<button id="startBtn">点击播放入场动画</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
document.getElementById(‘startBtn’).onclick = function () {
anime({
targets: ‘.item’,
translateY: [50, 0],
opacity: [0, 1],
scale: [0.8, 1],
delay: anime.stagger(150),
duration: 800,
easing: ‘easeOutBack’
});
};
</script>
</body>


</html>

✅ 效果说明：

  • 点击按钮，多个 .item 方块依次从底部浮现 + 缩放 + 淡入；
  • 动画具有层次感和错位感，模拟复杂入场行为；
  • 常用于首页 Hero、模块化组件切换等场景。

相关内容