前端福利!10個免費好用功能強大的網頁動畫效果庫

2021-01-07 有福氣的DI雪峰

你的所有努力，上天都知道

願所有的夢想都指日可待

動效設計是2018年

熱門的趨勢之一

寫給設計

2018年01月26日 天氣晴 | 寫給設計第22期

「

你必須承認，這些動效庫可以讓你的設計事半功倍！

」

不知道你還記不記得：在2018年的設計趨勢中，動效設計是一項熱門。不管你是UI設計師、平面設計師還是動畫、動效設計師，動效設計的作用已經顯然易見。

當然，創造動效並沒有必要從0開始，如果你仔細找找的話，會發現許多有趣的用來構建UI動效的素材和工具，而這些素材和工具正在成為越來越多設計項目中不可或缺的催化劑。

必須承認，這些代碼生成器和動畫工具可以讓設計師和前端的工作事半功倍。今天，豆豆會推薦10個靠譜的開源免費網頁動效庫，幫你的設計加速。

1. GSAP

https://greensock.com/gsap

GSAP可能是目前最炫酷的免費動畫庫之一了。它運行於純粹的JavaScript之上，是目前最強健的動畫資源庫之一。

它符合HTML5的規範，並且和幾乎所有的現代瀏覽器都能良好的協同，可以SVG、畫布元素甚至jQuery對象良好地協同，諸如 EaselJS這樣的庫也可以和GSAP聯動。

如果你需要一個強大的網頁動畫庫的話，GSAP絕對值得一看。

2. Anime.js

http://animejs.com/

當我第一次看到Anime.js這個庫的時候，徹底被它迷住了。這玩意非常強大，功能並不僅限於UI/UX動畫的製作。

你可以藉助Anime.js將動畫加持在LOGO、按鈕、圖像等各種各樣的元素上，它支持各種常見的觸發機制，比如點擊、懸停、滑動，你可以藉助它定義一系列的動畫。

3. Wicked CSS

Wicked CSS是一個相對更新一些的動效庫，它主要是基於CSS代碼的。Wicked CSS藉助CSS3的特性，提供了一些堪稱不可思議的特效。

在它的首頁上，你會看到許多實時演示，你可以通過這些範例學會如何讓對象進行旋轉、翻轉、劃入等不同類型的動畫效果。

有些動畫效果很簡單，但是它同樣可以實現許多複雜而有趣的動畫，這也是Wicked CSS有意思的地方。

4. Animate CSS

也許Animate.CSS才是你想要的最終的網頁動效解決方案。這個開原始碼庫是幾年前發布的，但是時至今日它依然是最有用的動效代碼庫。

開發者Daniel Eden是這個項目的發起者，他以最簡化的方式在網頁上發布自定義的CSS3動畫，通過半年多時間的積累，構建出了一個完整的動畫庫，並且幾乎可以應對絕大多數的項目。

項目主頁上有大量的演示，GitHub上還有許多很棒的文檔供你參考。

5. Tuesday

Tuesday所提供的動畫最令人著迷的地方，是其中動畫都非常的簡單、有用。藉助這個庫，你可以有效的控制頁面中元素的出現和消失的方式。

這些動畫並不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學和用戶體驗的層面提升整個頁面的設計。Tuesday是純粹的CSS代碼，幾乎可以和任何網站無縫地銜接起來。

6. CSShake

http://csshake.surge.sh/

坦率的講，我從來沒有見過比CSShake更加奇怪或者有趣的CSS庫了。它所帶來的動畫效果非常的瘋狂、獨特，它並不一定適合每個網站。

換句話來說，就是CSShake所提供的動效其實是獨一無二的，這也是為什麼它會存在於這個列表當中。

7. Mo.js

http://mojs.io/

通過細節仔細對比了諸多的JavaScript庫之後，不得不說Mo.js是最好的動效庫之一。Mo.JS非常的龐大，而且它是完全為UI/UX設計而生的動效庫。

關於Mo.js有大量的文檔和教程，它的代碼操作並不複雜，了解之後就可以輕鬆掌握。它有著許多令人驚嘆的功能，無論是導航欄，還是LOGO或者其他複雜的元素，它都能夠將他們合理的動畫化。

8. Animate Plus

Animate Plus是一個輕量級的動效庫，它只有2KB，但是它有著自定義JavaScript動畫所需的全部基本功能。

使用npm你可以輕鬆地將Animate Plus安裝好，你只需要按照Github上的代碼進行設置即可。其中所包含的絕大多數都是基本的Demo，所以你不會碰到複雜的問題，不過通過Github，你會找到所有你需要的選項和方法。

9. Bounce.js

http://bouncejs.com/

只需要點擊幾下，你就可以藉助Bounce.js創造出強大的CSS3和JS動畫了。

在主頁上，你會找到一個模塊化的自定義動畫生成器，通過這種方式Bounce.js會幫你將特定的功能添加到你的頁面上，無需添加額外的代碼。

和其他的同類工具不同的地方在於，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網頁構建器。Bounce.js是為數不多的可以直接在瀏覽器中進行設計和設置的動畫庫之一。

10. Magic

Magic可能是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果，並且帶有許多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3代碼庫合集，你也會在這裡學會許多巧妙的動畫設計技巧。

如果喜歡，就分享給你第一個想起的人吧~

相關焦點

  • 10個免費好用功能強大的網頁動畫效果庫
    今天～為你推薦10個靠譜的開源免費網頁動效庫，幫你的前端工程加速～正文共：2248 字 預計閱讀時間：6 分鐘
  • 前端高效開發必備的 js 庫梳理
    >fly.js 一個基於promise的http請求庫, 可以用在node.js, Weex, 微信小程序, 瀏覽器, React Native中動畫庫Anime.js 一個JavaScript動畫庫，可以處理CSS屬性
  • 美觀又實用,10款強大的開源Javascript圖表庫
    隨著發展，現代 Web 設計在改善體驗和功能的同時，對於美觀的追求也越來越高，可視化、交互式、動態等元素和效果似乎已成為標配。以下是為開發者推薦的 10 款開源 Javascript 圖表庫，可以幫助實現各種漂亮的功能。話不多說，直接開始吧！
  • 前端插件庫
    前端插件庫DataTables
  • 不會用JavaScript做動畫?這10個庫讓你成為動畫大佬!
    該庫可以同時連結處理多個動畫屬性，實現多個實例同步動畫，或者實現時間軸功能。3. Mo.js超過14K星，是實現Web的動畫圖形工具庫，API簡單明了，兼容性也不錯。雖然文檔寫的不太詳細，但是實例比較多。4.Popmotion超過14K星，這個JavaScript庫大小只有11kb。
  • 30個前端開發人員必備的頂級工具
    Gatsby 提供了大量功能，例如：React，webpack，現代JavaScript和CSS的強大功能SVG 優化器網絡上的性能至關重要：訪問者在等待內容加載時會不耐煩，搜尋引擎往往會懲罰速度緩慢的網站。
  • 《HTML5網頁前端設計》的教與學
    電子日曆的設計與實現重點篇（5-10章）第5章 HTML5 拖放API掌握HTML5元素拖放功能22上機實驗（任選其一）：《HTML5網頁前端設計實戰》第3章：1.電子日曆的設計與實現重點篇（5-10章）第5章 HTML5 拖放API掌握HTML5元素拖放功能22上機實驗（任選其一）：《HTML5網頁前端設計實戰》第3章：1.
  • 網頁前端設計快速入門技巧
    今天我就跟大家說說前端，如何快速入門？網頁前端設計一千個人眼中就有一千個哈姆雷特，每個人對網頁前端的理解也是不一樣的。我認為網頁前端開發就像是網際網路的美容師，不僅給訪客帶來視覺上的美感，而且隨著網際網路的發展，Html5、CSS3的應用，前端工程師結合技術與藝術能把網站最好的界面呈現給用戶，這就是網頁前端！
  • 10個實用的CSS和JavaScript動畫插件/框架/庫
    10個實用的CSS和JavaScript動畫插件/框架/庫 站長之家（CHINAZ.com）12月1日編譯：在網站中嵌入動畫已經成為今年的設計趨勢之一
  • 2018年推出的10個JavaScript動畫庫
    我們來看看十大JavaScript動畫庫。three.js42,569 ★這個列表中的頭號和最受歡迎的動畫庫（包含900多個項目貢獻者）是 Three.js。八年後仍然強勁，Three.js仍然是一個強大的動畫工具。依賴於WebGL，Three.js可用於構建精美的3D計算機圖形以在Web瀏覽器上運行。
  • 炫酷實用又好玩的19個JavaScript動畫庫
    今天我們來看看2019年的一些優秀的JavaScript動畫庫。2002年左右，我們使用Flash創建了Web動畫。 2008年，Flash製作的網站非常受歡迎（Flash網頁遊戲風靡一時）。後來，我們開始使用JavaScript為高效率和輕量級的網頁製作動畫。目前，我們甚至使用CSS和SVG進行動畫製作。但是，我們仍然需要JavaScript來製作高級動畫。使用JavaScript進行動畫是一項非常困難的工作，需要深入的知識和技能。但是，我們有一些很棒的JavaScript動畫庫，使開發過程更容易。你可以在網上找到很多JavaScript動畫庫。
  • 10個頂尖響應式HTML5網頁模板,拿走不謝
    不過幸運的是，現在的網頁設計師和開發人員已經開始共享HTML5，Bootstrap和CSS3中的免費網頁模板資源。鑑於網站模板的靈活性和強大的功能，現在廣大設計師和開發者對html5網站的實際需求日益增長。為了造福大家，本文整理了2018年最好的免費響應式HTML5網頁模板供大家學習。
  • 前端程式設計師的一些有學習借鑑作用的網站
    Froala 這個編輯器是收費的啦，但是也提供了免費版本，當然是功能閹割版啦。不過要是項目能支持的話，用這個是再好不過啦，界面很友好，功能也豐富（付費版），但是與vue結合的時候遇到了一些問題啦，不過因為收費，最終還是沒使用。（就介紹這幾個我了解過的啦。網上還有很多開源免費的富文本編輯器啦。ps：以上順序不代表排名。
  • 前端開發者常用的 9 個 JavaScript 圖表庫
    對於前端開發人員來說，如果能夠掌握交互式網頁中的數據可視化技術，則是一項很棒的技能。當然，通過一些 JavaScript 的圖表庫也會使前端的數據可視化變得更加容易。使用這些庫，開發者可以在無需考慮不同的語法所帶來的編程難題的情況下，輕鬆實現將數據轉化為易於理解的圖表。
  • 9個非常實用的CSS圖標庫
    以前網頁上顯示圖標都是用切成小圖片，然後根據不同場景作多個小圖，通過js來控制顯示效果
  • 不可錯過的實用前端工具
    Web 開發資源，免費使用，無使用限制。你可以直接在自己的網頁上引用這些 JS 文件。進入 CDNJS 網站後，搜索你想要的資源庫，找到後點擊項目後方的[ Copy Script Tag] ，然後貼上就可以用了。目前 CDNJS 在 Web 前端的 CDN 服務中排名第二（第一名是 Google），性能出色。
  • 手機、平板繪畫黨福利!10個非常好用的繪畫App趕緊試試
    想必這些都是繪畫初學者們經常在想的問題吧，就是不知道如何才能學好繪畫，在手機或者平板上繪畫出自己喜歡的東西那麼今天老師就在網絡上收集整理了一些關於如何學習繪畫的教程給大家，10個非常好用的繪畫App趕緊試試，教程非常簡單，趕緊來看看叭：大家平時畫畫，用的最多的當然是板子。不過偶爾開個腦洞，畫個頭像什麼的，還是平板最方便。
  • 十個免費的web前端開發工具
    前端開發佔據了web很大一部分，而且也成為了一種職業路徑。如果你將前端開發當做自己的又一新技術或者作為一個可發展事業，你需要為這個工作準備合適的工具。我將要分享我的十大現代必備的前端開發工具。它們都完全免費而且大多數工具能幫助你建立令人驚嘆的網站。1.
  • 前端: 如何更高效的學習Css? 有哪些庫值得推薦?
    接下來和大家分享幾個非常不錯的 css 庫.好用的css庫分享很多時候我們在實際的工作中很少用到純 css 類的工具庫, 一般都是能手寫就儘量手寫, 但是涉及到一些複雜的動畫交互, 我們用已有的第三方庫還是非常高效的, 這裡和大家分享幾個我之前經常使用的 css 庫.1. hover.css
  • 黑馬前端學員最高薪資19K,這網頁做的牛!
    JavaScript 在幾十年的發展中能一直保住「龍頭」位置，有人說是遇到了好的機遇，因為它是各大瀏覽器「欽定」的程式語言，但是這個說法可能只適用於十幾年前的JavaScript，現在JavaScript的優勢可不能這樣簡單粗暴的概括。JavaScript是一個全面的、簡單的、面向結果的Web開發語言之一。