Anime.js 簡介-js教程-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 區塊）上進行動畫處理。在本例中，我們將使用從初始位置向 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>

登入後複製

範例

在此範例中，我們將使用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中文網其他相關文章！