iOS - 多鏈式動畫框架 LSAnimator

Github github.com/Lision/LSAn…

效果

用 LSAnimator 寫短短兩行代碼便可實現的動畫交互：

demo.gif

簡介

LSAnimator 是一款新開源的 iOS 動畫庫。

與 JHChainableAnimations 相似的是它一樣支持鏈式動畫。不一樣的是 LSAnimator 支持複雜的多鏈式動畫，這樣就能夠實現不少用 JH 動畫庫沒法實現的動畫效果。

不明白鏈式動畫的同窗接着往下看~
用過 JH 的同窗能夠選擇直接看後面的 多鏈式動畫 小節~

鏈式動畫

鏈式動畫能夠幫助你僅僅使用少許代碼就能夠實現本來須要相對大量的代碼才能實現的動畫交互效果。

Note：這裏所說的鏈式動畫更準確的說法是 DSL 這個咱們放在之後的文章來講明。

JHChainableAnimations 出道之時就是靠着鏈式動畫的優點解放了廣大 iOS coder 在寫動畫時的勞動力「一炮而紅」，LSAnimator 儘量的繼承了其優勢，下面舉個栗子🌰來看一下 LSAnimator 的鏈式動畫效果與實現方式：

demo 平移

實現效果：

實現代碼：

// 待添加動畫view.X軸移動80pt.動畫時間爲1s
_animatorView.ls_moveX(80).ls_animate(1);複製代碼

demo 增量改變寬度(彈簧特效，重複3次)

實現效果：

實現代碼：

// 待添加動畫view.width增長20pt.彈簧特效.每次動畫0.5s重複3次執行
_animatorView.ls_increWidth(20).ls_bounce.ls_animateWithRepeat(0.5, 3);複製代碼

多鏈式動畫

上面講了鏈式動畫的優點，那麼 JHChainableAnimations 老早就已經實現了鏈式動畫，LSAnimator 爲何還要被造出來呢？是重複造輪子嗎？？？

先別急着下結論，咱們來想一想 JHChainableAnimations 究竟有哪些不足之處，或者是侷限性。

JHChainableAnimations 的不足之處（侷限性）

仍是來一個栗子🌰吧：

假設你處在一個電商公司吧，裏面有一個點擊收入購物車的動畫效果是相似於淘寶的：

動效：商品從一個方塊逐漸形變爲圓形，變爲圓形以後下移到低欄 TabBar 的購物車圖標。
標註：形變時間 2s，移動時間 2s （爲了凸顯效果，延長了動畫時間）

動畫：

先用 LSAnimator 來實現：

// 待添加動畫的view.圓角20pt.圓角動畫時間2s.Y軸位移100pt.位移動畫2s
_animatorView.ls_cornerRadius(20).ls_thenAfter(2).ls_moveY(100).ls_animate(2);複製代碼

這用 JHChainableAnimations 也很好作：

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:_animatorView];
animator.makeCornerRadius(20).thenAfter(2).moveY(100).animate(2);複製代碼

侵入性：
這裏可看出 LSAnimator 是無侵入性的添加，直接在目標 UIView 上面寫動畫便可。
JHChainableAnimations 須要開發者另聲明一個 JHChainableAnimator 來作相似 Andorid 中的 Builder，以後須要把 UIView 綁定到 animator上才能夠用 animator 作動畫。

命名：
LSAnimator 因爲是無侵入式添加，因此用到了 Category，所以爲了避免會誤覆蓋官方 API 因此方法名帶有 ls 前綴。
JHChainableAnimations 則無需考慮這一點，直接使用了類官方的命名。

從侵入性角度看，LSAnimator 無疑要優於 JHChainableAnimations。不過從使用體驗來說，ls 的前綴不會讓開發者有使用原生 API 的體驗。可是從筆者本身的角度來看，使用前綴無可厚非，並且若是項目中的 Categroy 比較多的話，敲 . 以後的提示會很是多，此時還能夠敲 ls 來快速篩選出本身想使用的函數。

若是有不一樣意見請聯繫我，或者去 GitHub 提 issue。我會統計大部分人偏心哪一種使用方式而改進哈~

好吧，上面的都是涼菜，接下來纔是正餐：

咱們的產品經理以爲動畫不爽，下落到 TabBar 的時候擋住了 TabBar 顯得很僵硬，因而 UI 交互設計師需求你在上述動畫鏈的總體過程同時把商品的改成透明。

Note: 注意敲黑板了，因爲改透明是與上面已實現的動畫鏈同時進行的，因此它們屬於平行運行的動畫。

標註變爲：

• 形變時間 2s，移動時間 2s （爲了凸顯效果，延長了動畫時間）
• 透明 1 ~ 0，時長 4s （爲了凸顯效果，延長了動畫時間）

很遺憾的（開心，否則怎麼有我 LSAnimator）告訴你們，僅僅使用 JHChainableAnimations 是沒法完成這一需求的（不相信的同窗能夠試試，JH 目前的源碼被我扒了一個遍，敢說這話我確定是有底氣的）

若是你強行想用 JH 來作這個需求就須要本身單獨寫冗長的動畫代碼（雖然這個例子裏面很簡單的改變了透明度，可是實際中的動畫交互可能會更復雜），千萬不要這樣寫：

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:_animatorView];
animator.makeCornerRadius(20).thenAfter(2).moveY(100).animate(2);
animator.makeOpacity(0).animate(4);複製代碼

爲了加深印象，咱們看下 JH 強加透明度代碼的後果：

不要懷疑，就是這樣的效果……
之前用 JH 遇到過相似情況的同窗當時確定也是被扎心了的~至於爲啥會這樣咱們能夠私下交流，也能夠本身扒源碼哈~

而後咱們再來看看 LSAnimator 的實現：

_animatorView.ls_cornerRadius(20).ls_thenAfter(2).ls_moveY(100).ls_animate(2);
// 添加並行動畫鏈，透明度~0，時長4s
_animatorView.ls_concurrent.ls_opacity(0).ls_animate(4);複製代碼

是的，需求小變更嘛，咱們的代碼也就只須要小變更，添加了一行代碼搞定。

咱們看看效果：

嬌羞（手動臉紅）拿一張圖來講明一下：

總結

LSAnimator 是筆者推薦的一套易上手、易讀寫、可多鏈式動畫庫，能夠把它當作是 JHChainableAnimator 的進化版，裏面有不少東西靈感都源自於 JH，具體的使用文檔在連接裏面都有（最下面有中文文檔）

在作簡單動畫時 LSAnimator 不輸於 JH，而且在 JH 乏力的複雜動畫交互時 LSAnimator 也能保證簡單高效的完成需求。

若是以爲 LSAnimator 值得關注的話還望多多 Star 一下嘿嘿~

沒錯 LSAnimator 就是偶寫的，它還只是一個寶寶，須要大家的貢獻，貢獻代碼、整理文檔、提 bug & issue 甚至是幫着 P 圖都算是貢獻，均可以加羣：163013540 來成爲此框架的一員大將哦~（目前起步，羣內人少，來了就是元老、骨幹、核心）