建站
咨詢
售后
建站咨詢
新聞中心
[[317158]]
不知道各位前端 & 移動端同學(xué)拿到 UI 同學(xué)給你的動效圖，心里是什么想法。小魚干曾混跡某個(gè)國內(nèi)技術(shù)論壇，里面的大佬們對動效有驚人的一致評論：砍死設(shè)計(jì)師系列，花里胡哨系列，有時(shí)間再做，一點(diǎn)都不實(shí)用…統(tǒng)一下，大部分的開發(fā)對動效的感覺是沒啥卵用徒增工作量的 Task，不過也有部分開發(fā)小伙伴覺得 App / Web 大多數(shù)時(shí)候并不是都注重的是功能，功能都能實(shí)現(xiàn)的情況下，想要博得用戶，UI（動效） 也很重要。
那么有什么方法讓產(chǎn)品錦上添花又不會增加過多的開發(fā)量呢？答案很簡單：就是開源的動效庫，這里小魚干推薦幾款 BlingBling 的動效庫，如果你有別的好收藏記得在評論區(qū)或者 HelloGitHub issue 區(qū)交流下心得喲~
1. 3D 動態(tài)墻：Slideshow
Slideshow 是一個(gè)采用 SceneKit 寫的 3D 動態(tài)圖片墻，雖然效果很酷炫但是性能便不是很好，如果你要是使用該動效建議優(yōu)化下。
GitHub 地址：
https://github.com/folio-sec/Slideshow
2. 定制動畫：DDAnimatedSwitch
DDAnimatedSwitch 是一個(gè)可定制的開關(guān)動畫。它支持你使用任何幀動畫來當(dāng) icon，你不僅可以為開關(guān)設(shè)置動畫，還可以為拇指設(shè)置動畫，可播放、調(diào)整比例大小、循環(huán)播放，在播放速度方面支持你加快，放慢和倒轉(zhuǎn)動畫。
GitHub 地址：
https://github.com/d-dotsenko/DDAnimatedSwitch
3. 加載進(jìn)程動畫：Loady
Loady 是一個(gè)小動效庫用來定制加載按鈕動畫，可用于顯示 UI 中 Button 的加載，支持你自定義樣式，它本身提供有 6 種不同的加載樣式，4 種動畫狀態(tài)（成功加載、加載失敗、加載中，正常加載）。
GitHub 地址：
https://github.com/farshadjahanmanesh/loady
4. 登錄動畫：LoginCritter
LoginCritter 是一個(gè)響應(yīng)文本交互的動畫，它會跟蹤用戶的操作軌跡同你交互。LoginCritter 使用多個(gè) UIPropertyAnimator，頭部旋轉(zhuǎn)是通過更新 fractionComplete 屬性來控制的。當(dāng)用戶輸入時(shí)，程序會計(jì)算文本的長度和寬度。
GitHub 地址：
https://github.com/cgoldsby/LoginCritter
5. 簡潔之美：Sica
Sica 是一個(gè)順序 / 并行執(zhí)行的動畫庫，雖然它是個(gè)簡單的動效庫，但是它支持絕大部分的動效。
GitHub 地址：
https://github.com/cats-oss/Sica
6. 指示小組件：Arrows
Arrows 是一種下拉動畫中指示箭頭小組件，它代表了三種不同的箭頭狀態(tài)：up / down / middle。
GitHub 地址：
https://github.com/antoniocasero/Arrows
7. 多個(gè)動效要收藏：Animate.css
Animate.css 是一個(gè) CSS 的跨瀏覽器的動畫，涵蓋了常見的動效，直接調(diào)用省時(shí)省力，此外它有在線版支持你搜索特定的效果：https://daneden.github.io/animate.css/
GitHub 地址：
https://github.com/daneden/animate.css
8. 加載插件：flutter_easyloading
flutter_easyloading 是一個(gè)簡單易用的 Flutter Loading 插件，包含 23 種動畫效果。
GitHub 地址：
https://github.com/huangjianke/flutter_easyloading
9. 菜單欄切換動效：LTabView
LTabView 是一個(gè)作者見到某個(gè) GIF 動效之后自己實(shí)現(xiàn)的帶動畫的 TabView 項(xiàng)目。
GitHub 地址：
https://github.com/Mr-XiaoLiang/LTabView
10. 又見加載之集大成者：LoadingIndicator
LoadingIndicator 是一個(gè)開箱即用的 loading 加載庫，包含 32 個(gè)不同類型動畫，靈感來源于 loaders.css 和 NVActivityIndicatorView。
GitHub 地址：
https://github.com/TinoGuo/loading_indicator
最后
愛啦，愛啦。
本文名稱：有了這些開源動效項(xiàng)目，設(shè)計(jì)和開發(fā)不再相殺只剩相愛
標(biāo)題URL：http://www.5511xx.com/article/cccgpjj.html
