10. SVG.js

github: https://github.com/svgdotjs/svg.js

SVG.js是一個輕量級的JavaScript庫，允許你輕松操作SVG和定義動畫。

事例地址：https://jsfiddle.net/Fuzzy/f2wbgx5a/

11. React Motion

github: https://github.com/chenglou/react-motion

React Motion 是一個 React 彈性動畫庫，使用 0-10 的彈性參數(shù)進行動畫處理：

import {Motion, spring} from 'react-motion'; 
// In your render... 
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> 
  {value => <div>{value.x}</div>} 
</Motion> 

這個庫解決了什么問題?

對于 95% 的動畫組件使用案例，我們沒有必要用硬編碼(把配置寫死)式的緩沖曲線和時間過渡來重排序。只需要給你的 UI 設(shè)置一個剛度系數(shù)和阻尼系數(shù)，接下來讓神奇的物理原理處理即可。用這種方式，根本無需擔(dān)心如中斷動畫等小問題。它也極大的簡化了 API 。

事例：

12. RELLAX

github: https://github.com/dixonandmoe/rellax

rellax.js是一款輕量級的純JavaScript滾動視覺差特效插件。rellax.js壓縮后的版本僅871個字節(jié)，在手機等小屏幕設(shè)備中，插件會自動限制視覺差特性。

13. Dynamics.js

github: https://github.com/michaelvillar/dynamics.js

dynamics.js 是一個 Javascript 庫，可以創(chuàng)建基于物理的 CSS 動畫。

14. mo.js

github: https://github.com/mojs/mojs

Mo.js是一個"簡潔、高效"圖形動畫庫，擁有流暢的動畫和驚人的用戶體驗，在任何設(shè)備上，屏幕密度獨立的效果都很好，你可以繪制內(nèi)置的形狀或者自定義形狀，隨便，只要你喜歡，你還可以繪制多個動畫，再讓它們串聯(lián)在一起，逼話不多說詳細(xì)的請瀏覽 Mo.js官方網(wǎng)站

15. Reveal.js

github:https://github.com/hakimel/reveal.js

Reveal.js 做 PPT 的優(yōu)點是可以使用 markdown 語言直接寫靜態(tài)的文本，并可以加入各種 html 語言支持的交互動畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。缺點是使用 markdown 時對單個 HTML 元素操作不夠靈活。

這個攻略會記錄一些使用 Reveal.js 做 PPT 的心得以及經(jīng)驗教訓(xùn)。為了簡單化，會盡力使用 Markdown 做靜態(tài)頁面，在動畫演示部分使用 p5js。

16. Animsition

github: https://github.com/blivesta/animsition

17. SVG Mesh 3d

github: https://github.com/mattdesl/svg-mesh-3d

一個將SVG字符串轉(zhuǎn)換為3D三角網(wǎng)格的高級模塊。最適合用于剪影，如字體圖標(biāo)SVG。

18. Zdog

github: https://github.com/metafizzy/zdog

zdog 是一個圓形、扁平、設(shè)計師友好的偽3D引擎，通過這個庫，可以創(chuàng)建偽3D元素，不需要知道幾何或代數(shù)來創(chuàng)建幾何圖形。。

作者：Chimezie Enyinnaya 譯者：前端小智

來源：blog 原文：https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo

【編輯推薦】