我是唯一一個對這些最近流行的動畫 UI 元件庫印象深刻的人嗎？
眾所周知，當今的用戶互動不僅僅是點擊和滾動，而是提供引人入勝且令人愉悅的體驗。
開發人員使用這些函式庫有兩個主要原因：A - 節省時間，B - 讓 Web 互動感覺流暢。
開發人員轉向這些庫的另一個關鍵原因是，它們有助於建立不僅具有視覺吸引力和流暢性的登陸頁面，而且還給人一種優質的感覺，增強頁面將存取者轉化為用戶或客戶的能力。
在本部落格中，我們將列出您應該考慮合併到您的專案中的動畫 UI 庫。
目錄
動畫 UI 庫
圖片來源：克里斯蒂娜·沃爾切克
現在，不浪費任何時間，讓我們直接跳到動畫 UI 庫列表，這些庫可以透過令人驚嘆的視覺效果和流暢的互動使您的專案栩栩如生。
註：此列表的順序並不代表任何排名或偏好；這些庫只是以隨機順序列出。
MagicUI
一個開源 UI 函式庫，提供使用 React、Typescript、Tailwind CSS 和 Framer Motion 建立的免費開源動畫元件，是 shadcn/ui 的完美伴侶。
它提供了獨特的元件，如選框、英雄視訊對話框、動畫列表、Dock、模型等。除此之外，它還在專業版本中提供預先建置的模板。
-
50 多個免費元件
-
11k+ GitHub Stars
-
個人和商業專案的 MIT 許可證
使用者介面
流行的庫提供可自訂的元件，用於快速建立令人驚嘆的高效能網站。它支援 Next.js、React.js、TailwindCSS 和 Framer Motion。
您可以輕鬆地將元件複製並貼上到您的專案中。它有許多獨特的元件，如極光背景、背景光束、互動式 GitHub 地球儀、影像鏡頭效果等等。
-
70 多個免費元件
-
個人和商業專案的 MIT 許可證
UI-Layout
UI-Layout 是一個互動式動畫元件庫，專為使用 React 和 Next.js 等框架的 Web 開發人員設計。基於 Tailwind CSS、Framer Motion 和 GSAP（GreenSock 動畫平台）建置
它提供高度可自訂的元件，如運動數字、圖像滑鼠軌跡、動畫滑桿、滾動動畫、閃光等等。
-
50+ 動畫 UI 元件
-
600+ GitHub star
-
個人和商業專案的 MIT 許可證
Cult/UI
Cult/UI 是可重複使用元件、主題和模板的開源集合，專為設計工程師整合到他們的 React 應用程式中而設計。採用 Tailwind CSS 樣式並與 Shadcn 完全相容
它支援複製貼上功能，並提供有用的元件，如著色器鏡頭模糊、動態島、可自訂的分形網格等等。
-
25+ UI 元件，6 個 Fullstack shadcn 模板
-
1.5k GitHub 星星
-
個人和商業專案的 MIT 許可證
Eldora UI
它是一個開源動畫 UI 元件庫，提供了一系列可重複使用元件，您可以將這些元件複製並貼上到您的 Web 應用程式中。
它採用 React、TypeScript、Tailwind CSS 和 Framer Motion 建置，為開發人員提供可自訂的元素來增強使用者介面。
-
25+ 多種元件、模板
-
1.2k GitHub 星星
-
個人和商業專案的 MIT 許可證
Syntax UI
Syntax 是一個開源專案，提供預先建置的、Tailwind CSS 支援的元件、動畫和效果 - 使用 Framer Motion 實作。
此外，它還提供了各種元件，例如選項卡和切換開關、定價表、推薦、表情符號五彩紙屑效果等等。
-
25+ 動畫 UI 元件
-
800+ GitHub Stars
-
個人和商業專案的 MIT 許可證
Hover.dev
Hover.dev 函式庫可協助您為 React、Tailwind CSS、Framer 運動等新增互動式動畫 UI 元件和範本。它適用於免費增值模式，您可以使用其 Hover Pro 解鎖所有元件。
-
38 個元件
-
Hover 專業版 49 美元/永久
Svelte 動畫元件
Svelte 動畫元件庫提供了一系列免費的開源元件，旨在透過引人入勝的動畫增強 Svelte 應用程式。
該庫使用 Tailwind CSS 和 Svelte Motion 建置，為開發人員提供了可自訂的獨特元件，例如選框、碼頭、流星、波紋效果等。
-
580 個 GitHub 星星
-
50 多個免費元件。
-
個人和商業專案的 MIT 許可證
LunarUI
LunarUI 是一個進階元件庫，提供了一系列為 React JS 和 Vue JS 建立的互動式和動畫 TailwindCSS 元件。
它們的元件是完全可自訂的，允許開發人員根據特定的專案要求進行客製化。
-
20 多個 UI 動畫元件和 1 個登陸頁面
-
$59.00 終身使用。免費更新
Animata
Animata 是一個免費的開源集合，包含手工製作的動畫、效果和交互，您可以透過簡單的複製和貼上將其無縫整合到您的專案中。動畫是使用 TailwindCSS 和 React.js 建構的。
它提供了各種各樣的元件，如邊框尾部、鏡像文字、小部件卡、便當網格等等。
-
1k GitHub 啟動
-
80+ UI 動畫元件
-
個人和商業專案的麻省理工學院許可證。
InspiraUI
InspiraUI 是一個開源程式庫，提供了一系列優雅、即用的 Vue 元件，旨在靈活且易於整合。
它是用 shadcn-vue、 @vueuse/motion和 TailwindCSS 建置的，它為開發人員提供了可自訂的元素來增強用戶介面。
使用 InspiraUI，您可以解鎖許多不同的元件，例如發光邊框、燈效果、連結預覽、徽標摺紙、粒子圖像等等。
-
50 多個 UI 元件
-
800+ GitHub star
-
個人和商業專案的麻省理工學院許可證。
結論
就這樣吧！這些是我們遇到過的一些最好的動畫 UI 元件庫。這些庫中的每一個都可以幫助您增強用戶體驗，節省開發時間，並為您的專案營造精緻、現代的感覺。
如果您知道我們錯過了任何其他動畫 UI 庫，請在評論中告訴我們。我們始終希望與希望為用戶帶來迷人 UI 體驗的開發人員分享更多資源。
關於我們
我們在ThemeSelection提供精選的高品質、現代設計、專業且易於使用的高級和免費管理面板，例如bootstrap 管理模板、 React 管理儀表板、 Asp NET Core 管理儀表板、 Vue 管理模板、 Next JS 儀表板, UI 套件。
如果您正在尋找免費的管理範本、UI 套件和主題，請造訪我們的網站......!!
原文出處：https://dev.to/themeselection/10-trending-animated-ui-component-libraries-4joe
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式