動畫，是吸引你客戶注意的好方法之一。 

在項目開發中，我們可以通過創造有趣的動畫來為我們的項目增加視覺感與用戶體驗，同時，也為我們的網站增添了獨特的美感，而且還提高了用戶參與度并創造了令人難忘的第一印象。

因此，今天這篇文章，我將整理了10個有趣又有用的 JavaScript 動畫庫，從而幫助你快速創建動畫，其中包括， 滾動動畫、手寫動畫、SPA頁面過渡、打字動畫、彩色動畫、SVG動畫……它們的功能實用而簡單。

那么，我們現在開始吧。

1.Anime.js

地址：https://animejs.com/

Anime.js 在 GitHub 上擁有超過 43,000 顆星，是最受歡迎的動畫庫之一。

它是一個輕量級的 JavaScript 動畫庫，具有簡單的 API，可用于對 CSS 屬性、SVG、DOM 屬性和 JavaScript 對象進行動畫處理。 

使用 Anime.js，我們可以播放、暫停、重新啟動或反轉動畫。該庫還提供了令人驚嘆的功能，可以通過以下和重疊的操作對多個元素進行動畫處理。該庫還包含各種與動畫相關的事件，我們可以使用回調和承諾來監聽這些事件。

2.Lottie

地址：https://airbnb.io/lottie/

Lottie 是一個庫，它可以解析使用 Bodymovin 插件以 JSON 格式導出的 Adobe After Effects 動畫，并在移動和 Web 應用程序上本地渲染它們。 

這樣用戶就無需手動重新創建由專業設計師在 After Effects 中創建的高級動畫。僅 Web 版本在 GitHub 上就有超過 27,000 顆星。

3. Velocity

地址：http://velocityjs.org/

使用 Velocity，您可以創建彩色動畫、變換、循環、緩動、SVG 動畫等。它使用 $.animate() 與 jQuery 庫中的方法相同的 API，并且可以與 jQuery 集成（如果可用）。 

該庫提供漸變、滾動和滑動效果。除了能夠控制動畫的持續時間和延遲之外，我們還可以在動畫完成后的某個時刻反轉動畫，或者在動畫進行過程中完全停止動畫。 

該庫在 GitHub 上擁有超過 17k 顆星，是 Anime.js 的理想替代品。

4.Rough Notation

地址：https://roughnotation.com/

Rough Notation 是一個 JavaScript 庫，用于在網頁上創建彩色注釋并為其設置動畫。它使用 RoughJS 創建手繪的外觀和感覺。 

我們可以創建多種注釋樣式，包括下劃線、方框、圓形、突出顯示、刪除線等，并控制每種注釋樣式的持續時間和顏色。

5.Popmotion

地址：https://popmotion.io/

Popmotion 是一個強大的庫，用于創建引人注目的動畫。為什么不一樣呢？— Popmotion 不會假定您想要設置動畫的對象的屬性，而是提供可在任何 JavaScript 環境中使用的簡單、可組合的函數。

該庫支持數字、顏色和復雜字符串的關鍵幀、彈簧和慣性動畫。該庫經過了良好的測試和積極維護，在 GitHub 上擁有超過 19,000 顆星。

6. Vivus

地址：https://maxwellito.github.io/vivus/

Vivus 是一個 JavaScript 庫，允許您對 SVG 進行動畫處理，使它們看起來像是正在繪制的。它快速、輕量級、完全獨立于工具，并提供三種不同的 SVG 動畫方法：它提供三種不同的 SVG 動畫方法：延遲、同步和一對一。 

我們還可以使用自定義腳本以您喜歡的方式繪制 SVG。

Vivus 還允許您自定義持續時間、延遲、計時功能和其他動畫設置。 

查看 Vivus Instant 以獲取現場實踐示例。

7.GSAP：Green Stocking Animation Platform 

地址：https://greensock.com/

GreenSock 動畫平臺 (GSAP) 是一個庫，可讓我們創建適用于所有主要瀏覽器的精彩動畫。您可以在 React、Vue、WebGL 和 HTML 畫布中使用它來對顏色、字符串、運動路徑等進行動畫處理。 

它還附帶了 ScrollTrigger 插件，讓您只需幾行代碼即可創建令人印象深刻的基于滾動的動畫。

GSAP 是一款通用且流行的工具，在超過 1100 萬個網站上使用，在 GitHub 上擁有超過 15K 個“星星”。您可以使用 GreenSock 的 GSDevTools 輕松調試使用 GSAP 創建的動畫。

8. Three.js

地址：https://trijs.org/

Three.js 是一個用于顯示復雜 3D 對象和動畫的輕量級庫。它利用 WebGL、SVG 和 CSS3D 渲染器來創建可在各種瀏覽器和設備上運行的引人入勝的 3D 體驗。它是 JavaScript 社區中著名的庫，在 GitHub 上擁有超過 85k star。

9.ScrollReveal

地址：https://scrollrevealjs.org/

ScrollReveal 庫允許您輕松地為進入或離開瀏覽器視口的 DOM 元素設置動畫。它提供了各種類型的優雅效果，可以在多個瀏覽器中滾動時顯示或隱藏元素。ScrollReveal 庫也非常易于使用，對 GitHub 的依賴為零，并且擁有超過 2100 名加星用戶。

10.Barba.js

地址：https://barba.js.org/

讓您的網站脫穎而出的一種創造性方法是在用戶瀏覽時在網頁之間添加生動的過渡。與簡單地顯示新網頁或重新加載瀏覽器相比，這會帶來更好的用戶體驗。

這就是 Barba.js 如此有用的原因；該庫讓網站像單頁應用程序 (SPA) 一樣運行，從而創建令人愉悅的頁面轉換。 

它減少了頁面之間的延遲，并最大限度地減少了瀏覽器發出的 HTTP 請求的數量。它在 GitHub 上有近 11,000 顆星。

11.Mo.js

地址：https://mojs.github.io/

它提供了一個簡單的聲明式 API，可以輕松創建在所有屏幕尺寸的設備上看起來都很棒的流暢動畫和特效。 

您可以移動 HTML 或 SVG DOM 元素，也可以創建具有一組獨特功能的特殊 Mo.js 對象。 

它是一個可靠且經過充分測試的庫，已編寫了 1500 多個測試，在 GitHub 上擁有超過 1700 顆星。

12.Typed.js

地址：https://mattboldt.com/demos/typed-js/

它的名字說明了一切：一個動畫打字庫。

它可以逐個字符地輸入特定的字符串，就像有人正在實時打字一樣，允許您暫停打字速度，甚至暫停打字特定的時間。

使用智能退格鍵，它允許您鍵入以與當前字符相同的字符集開頭的連續字符串，而無需退格整個前一個字符串 - 就像我們在上面的演示中看到的那樣。

此外，它還支持批量輸入，即同時在屏幕上輸入一組字符，而不是一個接一個地輸入。Typed.js 在 GitHub 上擁有超過 12K 顆星，并受到 Slack 和 Envato 的信任。

總結

作為開發人員，利用這些工具無疑將增強您的項目，并使其在競爭日益激烈的數字環境中脫穎而出。