資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Anime.js 建立時間軸動畫？
在本文中，我們將探索和學習時間軸動畫。**Anime.js** 是一個輕量級的 JavaScript 庫，它有一套精簡但強大的 API。它作用於 DOM 屬性、CSS 屬性、SVG 和 JavaScript 物件。
我們可以使用 **Anime.js** 構建多個複雜的動畫。Anime 內建的交錯系統有助於簡化複雜的後續和重疊動畫。它也可以用於時間和屬性。
如何使用 Anime.js？
我們可以透過以下兩種方式在程式碼中匯入或使用 Anime.js：
我們可以下載 anime.min.js 檔案，並直接在專案中使用它。
我們可以使用一些開放頁面網站上託管的 **anime.js CDN** 連結。使用此方法，我們無需將 Anime.js 新增到專案中，因此可以直接從外部源使用它。
Anime.js CDN 連結
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Anime.js 中使用的一些基本屬性
**targets** - 這些是用於定位或識別需要應用動畫的 CSS 選擇器。
**duration** - 這是動畫持續時間的毫秒數。
**delay** - 這定義了動畫開始之前的毫秒數。
**translateX** - 這將元素放置在 X 座標上。
**translateY** - 這將元素放置在 Y 座標上。
**offset** - 這給出了不同動畫之間的延遲，即另一個動畫在第一個動畫之後開始的差異。
示例
在這個例子中，我們使用 Anime.js 提供的動畫建立了一個簡單的擺。
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Pendulum using Anime.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
<style>
#rod {
position: relative;
margin-top: 50px;
margin-left: 150px;
width: 2px;
height: 150px;
border-radius: 5px;
transform-origin: 50% 0%;
transform: rotate(60deg);
background-color: green;
}
#pivot {
position: absolute;
top: -5px;
left: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: black;
}
#ball {
position: absolute;
bottom: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div id="rod">
<div id="pivot"></div>
<div id="ball"></div>
</div>
<script>
let animation = anime({
targets: '#rod',
rotate: [60, -60],
duration: 3000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>輸出
更新於：2022年4月26日
364 次檢視
廣告