Github github.com/Lision/LSAn…

效果

用 LSAnimator 寫短短兩行程式碼即可實現的動畫互動：

簡介

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 來成為此框架的一員大將哦~（目前起步，群內人少，來了就是元老、骨幹、核心）