11 個最好的 JavaScript 動態效果庫

時間 2019-11-05

標籤最好 javascript 動態效果欄目 JavaScript 简体版

原文原文鏈接

翻譯：瘋狂的技術宅
原文： https://blog.bitsrc.io/11-jav...

當我想要在網上找一個簡潔的 Javascript 動效庫時，老是發現不少「推薦」的庫都是缺少持續維護的。javascript

通過一番研究，我收集了 11 個最好的庫，你能夠用在本身的項目中。另外我還添加了一些有用可是缺乏持續維護的庫。css

提示：能夠用 Bit 來共享你的組件，用它們構建多個項目並與你的團隊同步更改。不要重複造輪子。html

這裏有一些 React spinners：前端

上面的每一個組件均可以在站點上找到並測試，能夠直接用在本身的項目中。
html5

使用純CSS

在深刻研究這些庫以前，不要忘記還有純 CSS。爲何？由於它是標準的，能夠提升性能（GPU），可以提供很好的向後和向前兼容性，它多是建立動態效果的最有效方式。java

1. Three.js

獲得超過 43K 的star，這個流行的庫是在瀏覽器上建立 3D 動畫的最好的一種方式，它用了 WebGL 。經過提供<canvas>、<svg>、CSS3D 和 WebGL 渲染器，該庫可讓咱們跨設備和瀏覽器建立豐富的交互式體驗。該庫於 2010 年 4 月首次推出，目前仍有近 1000 名參與者開發。react

github： https://github.com/mrdoob/thr...git

2. Anime.js

超過20K的 star，Anime 是一個 JavaScript 動畫庫，能夠處理 CSS 屬性、單個 CSS 轉換、SVG或任何DOM屬性，以及 JavaScript 對象。這個庫容許你連接多個動畫屬性、對多個實例進行同步、建立時間軸等。程序員

github：https://github.com/juliangarn...github

3. Mo.js

這個庫有 14K 的 star，是一個用於 Web 的動態圖形工具集，有簡單的聲明性 API、跨設備兼容性和超過 1500 個單元測試。你能夠在 DOME 或 SVG DOME 周圍移動你建立的圖形或建立惟一的 mo.js 對象。儘管文檔有些欠缺，可是示例仍是很豐富的，這裏有mo.js 的 CSS 技巧的介紹。

github：https://github.com/legomushro...

4. Velocity

codepen上的演示：https://codepen.io/hone/pen/a...

有 15K 的 star，Velocity 是一個快速的 Javascript 動畫引擎，有與jQuery的 $.animate(). 相同的API。它具備顏色動畫、變換、循環、漸變、SVG支持和滾動。這是 Velocity 高性能引擎的細分，這是使用該庫的SVG動畫的簡介。

github：https://github.com/julianshap...

5. Popmotion

有 14K 的star，這個庫只有 11kb 的大小。它容許開發人員從動做建立動畫和交互，動做是能夠啓動和中止的值的流，並使用CSS、SVG、React、three.js 和任何接受數字做爲輸入的 API 建立。

github：https://github.com/Popmotion/...

6. Vivus

超過10K的star，Vivus 是一個零依賴 JavaScript 類，可讓你製做 SVG 動畫，讓它們具備可以被繪製的外觀。有不少動畫模版能夠用，也能夠建立自定義腳原本繪製 SVG。不妨親自去 Vivus-instant 看一看實例。

github：https://github.com/maxwellito...

7. GreenSock JS

GSAP 是一個 JavaScript 庫，用於建立高性能、零依賴性、跨瀏覽器的動畫，其聲稱有超過400萬個網站在使用。 GSAP 很是靈活，能夠與React、Vue、Angular 和原生 JS 一塊兒使用。 GSDevtools 能夠幫助你修改用 GSAP 構建的動畫。

github：https://github.com/greensock/...

8. Scroll Reveal

憑藉15K 的star 和零依賴關係，該庫爲 Web 和移動瀏覽器提供了簡單的滾動動畫，可以以動畫的方式顯示滾動內容。它支持多種簡潔的效果，甚至可讓你使用天然語言去定義動畫。這是一個簡短的SitePoint教程。

github：https://github.com/jlmakes/sc...

9. Hover (CSS)

嗯，這是一個 CSS 庫。得到了 20K 的 star，Hover 提供了 CSS3 的強大懸停效果，可用於連接、按鈕、徽標、SVG 和圖像等，能在CSS、Sass和LESS中使用。你能夠找到要在本身的樣式表中使用的效果並簡單的複製粘貼，或者去引用樣式表。

github：https://github.com/IanLunn/Hover

10. Kute.js

一個徹底成熟的原生 JavaScript 動畫引擎，具備跨瀏覽器動畫的基本功能。不太重點仍是代碼質量、靈活性、性能和大小（其核心引擎只有17k 大小，壓縮包僅 5.5k）。這裏是演示。該庫也是可擴展的，所以你能夠添加本身的功能。

github：https://github.com/thednp/kut...

11. Typed.js

這個有6K star 的庫的基本功能是能讓你以選定的速度建立一個打字動畫。你還能夠在頁面上放置一個用戶不可見的 <div> 標籤並從中讀取你要輸出的內容，並能方便搜索引擎抓取。這個庫很是流行並且充滿新意。

github：https://github.com/luisvinici...
另外還有iTyped：https://github.com/luisvinici...

有用但缺少維護的

注意，這 8 個庫大多沒有維護，因此請當心使用。

Particles —— 用於建立粒子的輕量級JavaScript庫
github：https://github.com/VincentGar...
loaders.css —— 使人愉快的，以性能爲中心的純 css 加載動畫。
github：https://github.com/ConnorAthe...
Parallax JS —— 對智能設備的方向做出反應的視差引擎
github：https://github.com/wagerfield...
Bounce.js —— 快速建立漂亮的 CSS3 動畫。
github.com：https://github.com/tictail/bo...
CTA JS —— 使你的「動做效果」路徑動起來
github：https://github.com/chinchang/...
html5tooltipsjs - 流暢的 3D 動畫提示效果
github.com：https://github.com/ytiurin/ht...
Pace JS —— 自動爲你的網站添加進度條。
github：https://github.com/HubSpot/pace
Anijs —— 無需編碼便可提高網頁設計效果的庫。
github：https://github.com/anijs/anijs