有了這些開源動(dòng)效項(xiàng)目，設(shè)計(jì)和開發(fā)不再相殺只剩相愛

作者：HelloGitHub-小魚干 2020-03-03 15:11:04

不知道各位前端 & 移動(dòng)端同學(xué)拿到 UI 同學(xué)給你的動(dòng)效圖，心里是什么想法。小魚干曾混跡某個(gè)國內(nèi)技術(shù)論壇，里面的大佬們對(duì)動(dòng)效有驚人的一致評(píng)論：砍死設(shè)計(jì)師系列，花里胡哨系列，有時(shí)間再做，一點(diǎn)都不實(shí)用…統(tǒng)一下，大部分的開發(fā)對(duì)動(dòng)效的感覺是沒啥卵用徒增工作量的 Task，不過也有部分開發(fā)小伙伴覺得 App / Web 大多數(shù)時(shí)候并不是都注重的是功能，功能都能實(shí)現(xiàn)的情況下，想要博得用戶，UI（動(dòng)效）也很重要。

那么有什么方法讓產(chǎn)品錦上添花又不會(huì)增加過多的開發(fā)量呢？答案很簡單：就是開源的動(dòng)效庫，這里小魚干推薦幾款 BlingBling 的動(dòng)效庫，如果你有別的好收藏記得在評(píng)論區(qū)或者 HelloGitHub issue 區(qū)交流下心得喲~

1. 3D 動(dòng)態(tài)墻：Slideshow

Slideshow 是一個(gè)采用 SceneKit 寫的 3D 動(dòng)態(tài)圖片墻，雖然效果很酷炫但是性能便不是很好，如果你要是使用該動(dòng)效建議優(yōu)化下。

GitHub 地址：

https://github.com/folio-sec/Slideshow

有了這些開源動(dòng)效項(xiàng)目，設(shè)計(jì)和開發(fā)不再相殺只剩相愛

2. 定制動(dòng)畫：DDAnimatedSwitch

DDAnimatedSwitch 是一個(gè)可定制的開關(guān)動(dòng)畫。它支持你使用任何幀動(dòng)畫來當(dāng) icon，你不僅可以為開關(guān)設(shè)置動(dòng)畫，還可以為拇指設(shè)置動(dòng)畫，可播放、調(diào)整比例大小、循環(huán)播放，在播放速度方面支持你加快，放慢和倒轉(zhuǎn)動(dòng)畫。

GitHub 地址：

https://github.com/d-dotsenko/DDAnimatedSwitch

3. 加載進(jìn)程動(dòng)畫：Loady

Loady 是一個(gè)小動(dòng)效庫用來定制加載按鈕動(dòng)畫，可用于顯示 UI 中 Button 的加載，支持你自定義樣式，它本身提供有 6 種不同的加載樣式，4 種動(dòng)畫狀態(tài)（成功加載、加載失敗、加載中，正常加載）。

GitHub 地址：

https://github.com/farshadjahanmanesh/loady

4. 登錄動(dòng)畫：LoginCritter

LoginCritter 是一個(gè)響應(yīng)文本交互的動(dòng)畫，它會(huì)跟蹤用戶的操作軌跡同你交互。LoginCritter 使用多個(gè) UIPropertyAnimator，頭部旋轉(zhuǎn)是通過更新 fractionComplete 屬性來控制的。當(dāng)用戶輸入時(shí)，程序會(huì)計(jì)算文本的長度和寬度。