資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究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 塊）上進行動畫處理的主要目標。在這種情況下，我們將使用 translateX 從初始位置沿 x 軸進行平移。
<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 元素。然後在指令碼標籤內，我們定義了所需的動畫型別，即給定藍色框在三秒或 3000 毫秒內變為藍色圓形的運動。
結論
在本教程中，我們詳細討論了 anime.js 以及示例。Anime.js 是一個輕量級的 JavaScript 庫，具有簡單易用的 API。它與 JavaScript 物件、CSS 和 DOM 元素一起使用，並且 Anime.js 易於使用。傳統上，我們透過逐步修改元素的樣式來製作動畫。JavaScript 可以實現此類移動，但即使是最簡單的動畫也難以開發且耗時。
1K+ 次瀏覽
