Anime.js是一個輕量級的JavaScript動畫庫，可用於在網頁上創建各種交互式動畫效果。它支持CSS屬性、SVG、DOM屬性、JS物件等多種動畫方式，並提供了豐富的API和插件，讓開發者可以輕鬆地創建出網站中的動態效果。
官方文檔：https://animejs.com/
開始使用
- 引入 anime.js程式庫
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> - 使用anime.js提供的方法來編寫好基本的結構
<script>
anime({
//code here
});
</script>簡簡單單的小範例
會跳的球
<!DOCTYPE html>
<html lang="en">
<head>
<title>ball</title>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
.box {
position: absolute;
top: 30%;
left: 50%;
}
body {
background-color: #3c3c3c;
}
div.ball {
width: 80px;
height: 80px;
border-radius: 999em;
background-color: whitesmoke;
}
</style>
</head>
<body>
<div class="box">
<div class="ball">
</div>
</div>
<script>
anime({
targets: '.ball',
translateY: '50vh',
duration: 800,
loop: true,
direction: 'alternate',
easing: 'easeInCubic',
scaleX: {
value: 1.25,
duration: 150,
delay: 700
}
});
</script>
</body>
</html>屬性說明
- targets : 作用對象
- translateY：操作元素做出變化的屬性
- duration ：動畫的運行時間
- loop：定義動畫是否循環運行
- direction：屬性定義是否應該輪流反向播放動畫。有三個值default、alternate和reverse。
- easing：定義動畫運行速度曲線
變形
<!DOCTYPE html>
<html lang="en">
<head>
<title>transform</title>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
.box {
position: absolute;
top: 30%;
left: 50%;
}
body {
background-color: #3c3c3c;
}
div.ball {
width: 80px;
height: 80px;
border-radius: 999em;
background-color: whitesmoke;
}
</style>
</head>
<body>
<div class="box">
<div class="ball">
</div>
</div>
<script>
anime({
targets: '.ball',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>會跑的數字
<!DOCTYPE html>
<html lang="en">
<head>
<title>number</title>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
body {
background-color: #3c3c3c;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -75px;
}
#number {
text-align: center;
width: 150px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<input id="number" value="0">
</div>
<script>
anime({
targets: '#number',
value: [0, 100],
round: 1,
direction: 'alternate',
easing: 'easeInOutExpo',
loop:true,
duration: 2000
});
</script>
</body>
</html>