Anime.js 簡介
Anime.js 是一個輕量級 JavaScript 函式庫，具有簡單、有效的 API。它可與 JavaScript 物件、CSS 和 DOM 元素配合使用，而且 Anime.js 也易於使用。
傳統上，我們透過逐漸修改元素的樣式來製作動畫。這樣的動作可以透過 JavaScript 來實現，但即使是最簡單的動畫開發起來也很困難且耗時。
Anime.js 透過提供各種工具使動畫變得更容易。它提供了調節時間和用戶輸入的功能，並支援在同一物件上同時運行的許多動畫。
大多數流行的瀏覽器也支援 Anime.js。
Anime.js 的安裝部分
從下面提供的連結下載anime.min.js 檔案後，可以直接使用它 -
<script src="./folder/subFolder/anime.min.js"></script>
您可以透過搜尋「anime.js CDN」並將其貼到腳本標記中來找到該連結
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Anime.js 的基本語法
我們已經了解如何安裝anime.js及其基礎知識，現在讓我們轉向anime.js的語法 -
let animation = anime ({
targets,
properties,
property parameters,
animation parameters,
});
在上面的語法中，我們使用Anime.js提供的anime()函數建立了一個動畫，anime()函數接受一個JavaScript物件作為參數，其中包含我們動畫的屬性。
現在讓我們詳細討論 Anime.js 基本語法的每個術語 -
目標
對我們希望設定動畫的元件的引用包含在目標中，可以採用HTML 標籤、類別或id 元素的形式，無論CSS 選擇器、單一DOM 節點或DOM 節點陣列、一個物件使用JavaScript 創建，具有至少一個數字屬性和由前三個值中的任意一個組成的陣列。
屬性
我們在提到目標後提到我們想要設定動畫的屬性。這些屬性可以包括可進行動畫處理的 CSS、JS 和 SVG 屬性。
屬性參數
屬性參數包括很大程度上影響動畫時間的方面。此屬性參數涵蓋了多個特徵參數，包括持續時間、延遲、結束延遲、緩動、回合等等。
動畫參數
動畫的前後動作由動畫參數控制。這包括與動畫相關的選項，包括方向、循環和自動播放。
控制項
為了讓動畫具有互動性，Anime.js也提供了控制工具。以下是這些技術啟動、暫停、反向和重新啟動的一些範例。
範例
在此範例中，我們將建立一些具有特定寬度和高度尺寸的 div 元素。我們將使用一些 CSS 來添加特定的背景顏色。首先在 JavaScript 部分，我們將在 Anime 函數中加入所有必要的內容，然後傳遞具有屬性的物件
現在涵蓋所有內容後，我們的主要目標是在所需元素（此處為 div 區塊）上進行動畫處理。在本例中，我們將使用從初始位置向 x 軸移動的 translateX。
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>
Introduction of Anime.Js
</h2>
<div style="background: green;
height: 30px;
width: 50px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
easing: "linear",
direction: "alternate",
height: "100px",
width: "100px",
duration: 2300,
loop: true,
});
</script>
</body>
</html>
在上面的程式碼中，首先，我們定義了 HTML 程式碼的主要結構，然後使用程式碼頭部的「src」標籤將anime.js 函式庫新增到我們的程式碼中。首先在正文中，我們定義了要在其上實作動畫的 div 元素。然後在腳本標籤內，我們定義了所需的動畫類型，即給定綠色區塊在一段定義的時間內從其位置到另一個位置的運動，這也會改變區塊的大小。
範例
在前面的範例中，我們定義了一個方塊並對其進行動畫處理以增加其高度和寬度，現在將更改高度和寬度，但增加寬度並減少高度。
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>
Increasing the size of width and decreasing the size of height
</h2>
<div style="background: green;
height: 100px;
width: 10px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
easing: "linear",
direction: "alternate",
height: "10px",
width: "100px",
});
</script>
</body>
</html>
在上面的程式碼中，首先，我們定義了 HTML 程式碼的主要結構，然後使用程式碼頭部的「src」標籤將anime.js 函式庫新增到我們的程式碼中。首先在正文中，我們定義了要在其上實作動畫的 div 元素。然後在腳本標籤內，我們定義了所需的動畫類型，即給定綠色區塊在一段定義的時間內從其位置到另一個位置的運動，這也會改變區塊的大小，即從降低高度到增加寬度的大小。
範例
在此範例中，我們將使用anime.js 函式庫將矩形框動畫化為圓形。我們將更改的持續時間設定為 3000 秒，並在循環下運行。讓我們看看程式碼 -
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<center>
<h1 style="color: red;">More Animation by anime.js</h1>
<b>
Here we will do animation on the border
</b>
<div style="background: blue;
width: 100px;
height: 100px;
padding-top: 10px; ">
</div>
</center>
<script>
let animation = anime({
targets: "div",
easing: "easeInOutQuad",
loop: true,
duration: 3000,
backgroundColor: "yellow",
borderRadius: "110px",
});
</script>
</body>
</html>
在上面的程式碼中，首先，我們定義了 HTML 程式碼的主要結構，然後使用程式碼頭部的「src」標籤將anime.js 函式庫新增到我們的程式碼中。首先在正文中，我們定義了要在其上實作動畫的 div 元素。然後在 script 標籤內，我們定義了所需的動畫類型，即給定的藍色框在三秒或 3000 毫秒內移動到藍色圓圈。
結論
在本教程中，我們透過範例詳細討論了anime.js。 Anime.js 是一個輕量級 JavaScript 函式庫，具有簡單、有效的 API。它可與 JavaScript 物件、CSS 和 DOM 元素配合使用，而且 Anime.js 也易於使用。傳統上，我們透過逐漸修改元素的樣式來製作動畫。這樣的動作可以透過 JavaScript 來實現，但即使是最簡單的動畫開發起來也很困難且耗時。
以上是Anime.js 簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
