果你想抓住你的網站訪問者的注意力，還有什么能比動畫更好呢？使用網絡上免費提供的許多應用引擎，你可以很容易地讓你的網站元素褪色、跳動或嗖嗖作響。在今天的文章中，我們將看到JavaScript動畫庫如何幫助實現這一切。

首先，介紹一下JavaScript的動畫

添加只需要一個動作的簡單動畫（例如，切換）是一回事。對于這一點，你總是可以使用簡單的CSS動畫。但是，對于更復雜或高級的效果。 JavaScript是一個更好的工具。不言而喻，使用JavaScript來創建動畫比使用CSS更具挑戰性。

然而，JavaScript可以處理CSS所不能處理的事情。這給了開發者更多的權力來控制需要協調多個移動部件的復雜動畫。

JavaScript動畫是通過在一個元素的樣式上添加漸變來實現的。你可以把它們作為你代碼的一部分在線添加，或者把它們包含在其他對象中。在渲染時，這些變化由一個定時器調用。另外，你可以通過調整變化的時間間隔來控制動畫的連續性。

1. Anime.js

讓我們從Anime.js開始這個JavaScript動畫庫的列表。這個輕量級的動畫庫在GitHub上有35K多顆星。 通過一個強大的API工作，你可以用它來為HTML、CSS、JS、SVG和DOM屬性制作動畫。通過一個內置的交錯系統，它可以使創建波紋、定向運動、跟隨和重疊的效果顯得很簡單。這個系統在定時和屬性上都是可用的。

使用內置的回調和控制函數，你可以做很多事情。例如，你可以同步播放、暫停、控制、逆轉和觸發事件。

2. Velocity.js

Velocity.js結合了jQuery和CSS轉換的優點。它的評分接近17K星，在 GitHub上有接近17K顆星，并擁有像WhatsApp和Motorola這樣的杰出用戶。 Mailchimp.循環、反轉、延遲、隱藏/顯示元素、屬性數學（+、-、*、/）和硬件加速，都是其功能的一部分。

你可以使用Velocity.js來滾動 browser windows.它既可以與瀏覽器中加載的jQuery一起工作，也可以獨立于它，甚至可以撤消之前的動畫效果。

3. Popmotion

在接近 18K星，Popmotion是一個適用于任何JavaScript環境的功能性動畫庫。它幾乎可以與任何接受數字輸入的API一起工作，如 React，Three.js，A-Frame和PixiJS。

Popmotion的重量只有11.7kB，但卻很有沖擊力。它的特點是動畫，如關鍵幀、衰減、用于同步多個實例的時間線等。你可以錯開任何系列的動畫或函數，也可以使用純函數來組成你自己的配置。

4. Three.js

Three.js以60K以上的星級在這個JavaScript動畫庫列表中排名第一。 它依靠的是 WebGL來創建和渲染瀏覽器中的3D動畫。

有大量的文檔可以幫助你，一旦你通過了學習曲線，使用這個庫就沒有什么不能完成的。首先，使用Three.js編輯器，你可以創建一個場景。此后，你可以添加幾何圖形，并調整燈光和攝像機。材料、紋理、物體、顏色和霧化都可以進行調整，最后的文件可以發布到你的項目中。

5. GreenSock JS

GreenSock的GSAP與一組小的JavaScript文件一起工作，使動畫在所有主要的瀏覽器中看起來很好。它能順利地將多個動畫屬性連接起來，并消除瀏覽器的錯誤。

GSAP的動作包括在Canvas上創建動畫，以及為場景中的任何對象制作動畫。還可以逐步揭示、變形或沿路徑移動任何對象。為此，它與一堆軟件應用一起工作，如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模塊化結構有助于你選擇你需要的功能。擁有800萬用戶和10K+顆星的 GitHub上有800萬用戶和10K多顆星，這個強大的庫有很多優點。

6. AniJS

在這個列表中的JavaScript庫中，AniJS有些獨特。它允許你在一個簡單的 "句子 "結構中為元素添加動畫，這對剛接觸動畫的人來說是很好的。更重要的是，它的非特定性質使得幾乎每個人都可以在日常的用戶體驗設計中使用它。

上 GitHub，AniJS的評分超過了3.5K星。它不依賴任何第三方庫，通常有助于加快開發速度。它在安卓和iOS上都能很好地工作。 Android and iOS，也可以在所有流行的瀏覽器中使用。

7. Mo.js

運動圖形在動畫中起著很大的作用，Mo.js是一個可以讓你產生影響的選擇。由于有大量的教程和演示幫助，初學者可能不會發現創建幾何形狀和時間動畫的難度。

這些API可能看起來很簡單，但你可以用它們做很多事情。在這個工具包中，你會發現一個曲線編輯器和時間線編輯器來幫助你建立你的動畫，以及一個播放器來控制你的動畫。有不同的模塊用于交錯、緩和、時間線和更多。所有這些為Mo.js贏得了接近16K星的評價。

8. Vivus.js

如果你想在屏幕上實時地模仿鋼筆畫，你會用Vivus達到目的。它可以讓你對SVG進行動畫處理，給人以被繪制的感覺。由于它沒有任何依賴性，所以它是快速和輕便的。

你可以選擇任何一種可用的動畫 - 延遲、同步或OneByOne。否則，你也可以創建一個自定義腳本來繪制你的SVG。為了提高靈活性，你可以用一個簡單的JavaScript函數來覆蓋每個路徑的動畫。超過1.3萬名用戶對這個庫豎起了大拇指。

9. ScrollReveal JS

如果你希望在你的網頁元素滾動進入視圖時為它們制作動畫，ScrollReveal不會讓你失望。這個簡單易學的動畫庫沒有任何依賴性，在GitHub上有18.5K多顆星。

ScrollReveal支持不同類型的效果，在網絡和移動瀏覽器上運行良好。它故意用一個裸露的配置來工作，所以你可以把它作為你的創造力的畫布。為了使動畫的效果最大化，創作者建議你少用它。

10. Typed.js

Typed.js是一個簡單的庫（更像是一個插件，真的），用于在你的屏幕上對打字進行動畫處理。一旦你輸入任何字符串，訪問者就可以看到它以設定的速度被打出來。不僅如此，你還可以操作退格按鈕，以及開始一個新的句子。如果你希望讓禁用JS的訪問者也能看到，你只需要在頁面上放置一個HTML div。這樣一來，機器人和搜索引擎也能查看輸入的文字。

該庫在GitHub的評分為9.5K+星，強大的用戶包括Slack和Envato。

11. Lottie by AirBnB

Lottie是一種輕量級的動畫圖形格式，平衡了高質量的圖形和渲染成本。它使應用程序更小，并包括動態功能。它可以用于網絡、安卓、iOS和物聯網，不需要額外的軟件。

Lottie可以在任何支持JavaScript的瀏覽器上運行。動畫是以純文本形式存儲的，是人類可讀的。由于文本數據是以JSON格式存儲的，它很容易被任何JavaScript環境同化。這使得它成為一種流行的動畫圖形格式，以增強移動前端。僅僅是安卓版本就有接近3萬顆星。

言

上個周寫了一篇大屏開發經驗總結，引來了不少朋友圍觀，還未瀏覽的朋友可以直接跳轉：juejin.cn/post/736541…

很多前端在開發大屏的時候，一般都會涉及很多動畫效果開發，但我發現大部分前端動畫開發能力薄弱。

今天，我給大家介紹一下我常用到的一些比較好用的動畫開發庫，基本上能夠滿足99.9%的業務開發需求，讓產品經理和UI小姐姐看完后給你狂豎大拇指，記得收藏點贊噢~

gsap

做前端動畫，我強推這個框架，真的很好用！

GSAP（GreenSock Animation Platform）是一個用于創建高性能、跨瀏覽器的動畫的JavaScript庫。它提供了許多強大而靈活的API，允許開發者創建各種復雜的動畫效果。

使用起來非常簡單，我們實現一個動畫，將.box這個元素在x軸方向向右移動200px，耗時2秒

  gsap.to(".box", { 
    x: 200,
    duration: 2
  });

當然，這只是gsap功能的冰山一角，它還有很多可以讓我們高效工作的能力：

1. CSS屬性動畫：可以對幾乎所有CSS屬性進行動畫處理，包括不常用的屬性。
2. 時間線控制：提供時間線功能，可以方便地控制動畫的序列和并行。
3. 緩動函數：內置多種緩動函數，可以創建更自然的運動效果。
4. SVG和Canvas動畫：支持SVG和HTML5 Canvas元素的動畫。
5. 復雜動畫路徑：可以創建復雜的運動路徑，實現復雜的動畫效果。
6. 3D動畫：雖然GSAP主要用于2D動畫，但也支持一些3D動畫效果。
7. 插件系統：有豐富的插件系統，可以擴展其功能，比如MorphSVG插件可以創建SVG圖形的形變動畫。
8. 性能優化：GSAP在性能上做了大量優化，可以處理大量的動畫而不影響頁面性能。
9. 跨瀏覽器兼容性：確保動畫在各種瀏覽器和設備上都能平滑運行。

GSAP的一個關鍵特點是它對性能的優化，它使用優化的算法和瀏覽器的請求動畫幀（requestAnimationFrame）API來實現流暢的動畫效果。

此外，GSAP的API設計得非常人性化，易于學習和使用，同時它還提供了大量的文檔和示例來幫助開發者快速上手。

gsap官方地址：gsap.com

lottie

Lottie 是一個由愛彼迎（Airbnb）開發的開源動畫庫，主要用法就是UI設計通過專業動畫軟件（如After Effects）設計好之后，輸出json文件，然后通過 Lottie 將這些動畫無縫地集成到移動app和網頁中。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

Lottie優勢：

1. After Effects 兼容性：Lottie 支持將 After Effects 項目（.json 格式的動畫數據）直接轉換為可在應用和網頁中使用的動畫。
2. 跨平臺：Lottie 支持多種平臺，包括 Android、iOS、Web（通過 React Native、Vue、Angular 等框架）。
3. 性能炸裂：Lottie 使用原生的圖形和動畫代碼，這意味著動畫性能通常比使用 CSS 或 JavaScript 直接編寫的動畫更優。
4. 定制化：動畫可以被定制和動態修改，例如更改顏色、大小、速度等。
5. 輕量級：Lottie 動畫文件體積小，因為它們只包含關鍵幀數據，而不是完整的視頻或序列幀。
6. 易于使用：Lottie 提供了簡單的 API，使得在項目中集成動畫變得非常容易。
7. 動畫效果豐富：由于它基于 After Effects，Lottie 可以支持復雜的動畫效果，包括3D效果、遮罩、表達式等。
8. 實時渲染：Lottie 動畫是實時渲染的，這意味著動畫可以在不同的屏幕尺寸和分辨率下保持高質量。
9. 社區支持：作為一個開源項目，Lottie 有一個活躍的社區，不斷有新的功能和改進被加入。
10. 動畫緩存：Lottie 支持動畫的緩存，可以提高重復播放動畫的性能。

Lottie 的使用場景非常廣泛，從簡單的加載指示器到復雜的交互式動畫，都可以用 Lottie 來實現。

Lottie官方地址：airbnb.io/lottie/#/we…

React Spring

React Spring：react開發者的福音，這款框架是基于React的動畫庫，它使用基于物理的動畫，可以創建非常自然和流暢的動畫效果。

初始化一個簡單的動畫，讓div從左向右移動：

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  const springs=useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        ...springs,
      }}
    />
  )
}

React Spring官方地址：www.react-spring.dev/docs/gettin…

Anime.js

Anime.js：一個輕量級的JavaScript動畫庫，它使用CSS屬性和SVG，可以創建平滑的CSS和SVG動畫

初始化一個簡單的動畫：

anime({
  targets: '.css-prop-demo .el',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});

說實話，看api，有點類似于gsap動畫庫，也不知道它倆是怎么個關系~

Anime.js官方地址：animejs.com/documentati…

其他動畫庫

還有很多其他的動畫庫，但是作者本人還沒用過，如果有用過的小伙伴也可以在評論區發表一下使用體驗或者看法。

1. Framer Motion：也是一個基于React的動畫庫，它提供了一個簡單的API來創建動畫和交互效果。
2. Velocity.js：一個強大的動畫引擎，可以與jQuery結合使用，提供豐富的動畫效果。
3. Popmotion：一個功能全面的動作和動畫庫，支持React和非React環境。
4. Web Animations API：是現代瀏覽器提供的原生JavaScript動畫API，允許開發者以編程方式創建復雜的動畫。
5. KUTE.js：一個輕量級的動畫庫，專注于性能和易用性，支持CSS屬性、SVG和自定義屬性的動畫。
6. Flickity：雖然主要是一個輕量級的畫廊和卡丁車庫，但它也提供了一些基本的動畫功能。
7. GreenSock Draggable：GSAP的一個插件，允許元素的拖放，可以創建交互式的動畫效果。
8. CyberConnect：一個基于Web Animations API的庫，可以創建復雜的動畫和過渡效果。

總結

目前筆者用的比較多的是gsap和lottie，特別是在threejs項目中，用gsap做動畫再合適不過，而lottie大部分時間我是用來展示一些復雜的無交互的動畫開發。

作者：攻城師不浪
鏈接：https://juejin.cn/post/7367696432935419944