有了這些開源動效項目，設計和開發再也不相殺只剩相愛

做者：HelloGitHub-小魚乾

不知道各位前端 & 移動端同窗拿到 UI 同窗給你的動效圖，內心是什麼想法。小魚乾曾混跡某個國內技術論壇，裏面的大佬們對動效有驚人的一致評論：砍死設計師系列，花裏胡哨系列，有時間再作，一點都不實用…統一下，大部分的開發對動效的感受是沒啥卵用徒增工做量的 Task，不過也有部分開發小夥伴以爲 App / Web 大多數時候並非都注重的是功能，功能都能實現的狀況下，想要博得用戶，UI（動效） 也很重要。

那麼有什麼方法讓產品錦上添花又不會增長過多的開發量呢？答案很簡單：就是開源的動效庫，這裏小魚乾推薦幾款 BlingBling 的動效庫，若是你有別的好收藏記得在評論區或者 HelloGitHub issue 區交流下心得喲~

1. 3D 動態牆：Slideshow

Slideshow 是一個採用 SceneKit 寫的 3D 動態圖片牆，雖然效果很酷炫可是性能便不是很好，若是你要是使用該動效建議優化下。

GitHub 地址：github.com/folio-sec/S…

2. 定製動畫：DDAnimatedSwitch

DDAnimatedSwitch 是一個可定製的開關動畫。它支持你使用任何幀動畫來當 icon，你不只能夠爲開關設置動畫，還能夠爲拇指設置動畫，可播放、調整比例大小、循環播放，在播放速度方面支持你加快，放慢和倒轉動畫。

GitHub 地址：github.com/d-dotsenko/…

3. 加載進程動畫：Loady

Loady 是一個小動效庫用來定製加載按鈕動畫，可用於顯示 UI 中 Button 的加載，支持你自定義樣式，它自己提供有 6 種不一樣的加載樣式，4 種動畫狀態（成功加載、加載失敗、加載中，正常加載）。

GitHub 地址：github.com/farshadjaha…

4. 登陸動畫：LoginCritter

LoginCritter 是一個響應文本交互的動畫，它會跟蹤用戶的操做軌跡同你交互。LoginCritter 使用多個 UIPropertyAnimator，頭部旋轉是經過更新 fractionComplete 屬性來控制的。當用戶輸入時，程序會計算文本的長度和寬度。

GitHub 地址：github.com/cgoldsby/Lo…

5. 簡潔之美：Sica

Sica 是一個順序 / 並行執行的動畫庫，雖然它是個簡單的動效庫，可是它支持絕大部分的動效。

GitHub 地址：github.com/cats-oss/Si…

6. 指示小組件：Arrows

Arrows 是一種下拉動畫中指示箭頭小組件，它表明了三種不一樣的箭頭狀態： up / down / middle。

GitHub 地址：github.com/antoniocase…

7. 多個動效要收藏：Animate.css

Animate.css 是一個 CSS 的跨瀏覽器的動畫，涵蓋了常見的動效，直接調用省時省力，此外它有在線版支持你搜索特定的效果：daneden.github.io/animate.css…

GitHub 地址：github.com/daneden/ani…

8. 加載插件：flutter_easyloading

flutter_easyloading 是一個簡單易用的 Flutter Loading 插件，包含 23 種動畫效果。

GitHub 地址：github.com/huangjianke…

9. 菜單欄切換動效：LTabView

LTabView 是一個做者見到某個 GIF 動效以後本身實現的帶動畫的 TabView 項目。

GitHub 地址：github.com/Mr-XiaoLian…

10. 又見加載之集大成者：LoadingIndicator

LoadingIndicator 是一個開箱即用的 loading 加載庫，包含 32 個不一樣類型動畫，靈感來源於 loaders.css 和 NVActivityIndicatorView。

GitHub 地址：github.com/TinoGuo/loa…

最後

愛啦，愛啦。。

HelloGitHub 交流羣現已全面開放，添加微信號：HelloGitHub 爲好友。可同前端、Java、Go…各界大佬談笑風生、切磋技術~

關注公衆號加入交流羣