菜鸟教程
教程 animejs tutorial

按钮点击动画

在交互设计中，为按钮添加点击反馈动画可以显著提升用户体验。Anime.js 可以轻松实现点击缩放、颜色闪动等效果，增强页面的动感。

缩放反馈动画

以下是一个简单的按钮点击缩放+回弹效果示例：

js 
document.querySelector(".btn").addEventListener("click", function () {
  anime({
    targets: this,
    scale: [
      { value: 0.9, duration: 100 },
      { value: 1.0, duration: 300 },
    ],
    easing: "easeOutElastic(1, .5)",
  });
});

小结

通过结合点击事件和动画效果，可以让按钮更具“点击感”，在细节中提升产品品质。

示例演示

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

<head>
<meta charset="UTF-8" />
<title>按钮点击动画示例</title>
<style>
.btn {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
background-color: #4FC08D;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
user-select: none;
}


.btn:hover {
  background-color: #3a9d6f;
}

body {
  text-align: center;
  padding-top: 60px;
}



</style>
</head>


<body>
<button class="btn">点我试试</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
document.querySelector(‘.btn’).addEventListener(‘click’, function () {
anime({
targets: this,
scale: [
{ value: 0.9, duration: 100 },
{ value: 1.0, duration: 300 }
],
easing: ‘easeOutElastic(1, .5)’
});
});
</script>
</body>


</html>

相关内容