開始使用 Gsap！

GSAP（GreenSock 動畫平台）是一個強大的 JavaScript 函式庫，可讓您為 Web 應用程式建立高效能動畫。無論您想要製作 CSS、SVG 動畫，甚至創建複雜的序列，GSAP 都可以輕鬆處理。在這篇文章中，我將指導您了解 GSAP 入門的基礎知識，並向您展示如何創建您的第一個動畫！

---

什麼是GSAP？

GSAP 是一個與框架無關的函式庫，使開發人員能夠在所有主要瀏覽器上創建流暢且高效的動畫。使用 GSAP，您幾乎可以為 JavaScript 可以觸及的任何內容設定動畫，包括：

• CSS
• SVG
• 畫布
• React、Vue 等

它的 ScrollTrigger 外掛程式允許使用最少的程式碼實現令人驚嘆的基於滾動的動畫，使其成為開發人員的最愛。

入門

要開始使用 GSAP，您可以使用 CDN 或透過 npm 將其包含在您的專案中。以下是兩者的操作方法：

1. CDN 安裝：

將以下腳本標籤加入您的 HTML 檔案：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

這是開始使用 GSAP 最簡單的方法，無需任何安裝！

1. NPM 安裝：

如果您喜歡使用 npm，可以透過在終端機中執行以下命令來安裝 GSAP：

npm 安裝 gsap

然後您可以將 GSAP 匯入到您的 JavaScript 檔案中，如下所示：

從「gsap」導入gsap；

創建您的第一個動畫

讓我們為網頁上的元素創建一個簡單的淡入動畫。首先加入以下 HTML：

你好，GSAP！

;

現在，讓我們為這個框設定動畫，以便它在頁面載入時淡入。新增以下 JavaScript 程式碼：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

說明：

• opacity: 0 : 盒子開始不可見。
• period: 1 : 動畫持續1秒。
• y: -50 ：盒子從最終位置上方 50 像素開始，向下移動到視圖中。

增加互動性

您也可以為動畫添加互動性。例如，讓我們建立一個當您將滑鼠懸停在其上方時尺寸會增大的按鈕：

// Fade in the box when the page loads
gsap.from(".box", { opacity: 0, duration: 1, y: -50 });

現在，加入以下 JavaScript：

<button class="animate-btn">Hover over me</button>

說明：

滑鼠進入按鈕時，放大10%。
當滑鼠離開時，它會恢復到原來的大小。

結論

GSAP 是一個令人難以置信的在網路上創建動畫的工具。憑藉其易用性和強大的功能，您可以增強用戶體驗並使您的專案栩栩如生。我鼓勵您更多地探索 GSAP，查看官方文件以獲得更深入的見解，並嘗試不同的動畫。

動畫製作愉快！

參考

有關 GSAP 的更多信息，您可以訪問官方 GitHub 存儲庫：

• Github 上的 GSAP

以上是開始使用 Gsap！的詳細內容。更多資訊請關注PHP中文網其他相關文章！