菜鸟教程
教程 animejs tutorial

常用属性动画

Anime.js 支持多种动画属性，涵盖几何变换、颜色变化及样式控制，以下是最常用的属性示例。

位移（translateX / translateY）

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

缩放（scale）

js 
anime({
  targets: ".box",
  scale: 1.5,
  duration: 1000,
});

旋转（rotate）

js 
anime({
  targets: ".box",
  rotate: "1turn",
  duration: 1000,
});

透明度（opacity）

js 
anime({
  targets: ".box",
  opacity: 0.5,
  duration: 1000,
});

颜色（color / backgroundColor）

js 
anime({
  targets: ".box",
  backgroundColor: "#FF0000",
  color: "#FFFFFF",
  duration: 1000,
});

其他支持属性

  • 边框圆角（borderRadius）
  • 宽高（width / height）
  • 滤镜（filter，如 blur）

小结

熟练掌握这些常用属性，可以实现丰富的动画效果，提升用户体验。

示例演示

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

<head>
<meta charset="UTF-8" />
<title>Anime.js 常用属性动画示例</title>
<style>
.box {
width: 80px;
height: 80px;
background-color: #4FC08D;
margin: 20px;
display: inline-block;
color: white;
line-height: 80px;
text-align: center;
font-weight: bold;
user-select: none;
border-radius: 8px;
}
</style>
</head>


<body>
<div class="box">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,
scale: 1.5,
rotate: ‘1turn’,
opacity: 0.5,
backgroundColor: ‘#FF0000’,
color: ‘#FFFFFF’,
duration: 3000,
easing: ‘easeInOutQuad’
});
</script>
</body>


</html>

相关内容