Anime.js 簡介-js教程-PHP中文網

首頁

web前端

js教程

Anime.js 簡介

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 pm 12:45 PM

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 id="More-Animation-by-anime-js">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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。