LSAnimator - 易於讀寫的多鏈式動畫框架

Lision發表於2018-01-02

LSAnimator

易於讀寫的多鏈式動畫框架 (完美支援 Swift 3.2 - 4.0)

GitHub:LSAnimator

為什麼選擇 LSAnimator?

通過使用 LSAnimator(Objective-C)或者 CoreAnimator(Swift)可以用少量的程式碼實現複雜而又易於維護的動畫。

LSAnimator - 易於讀寫的多鏈式動畫框架

為了提供友好的 Swift 使用體驗我新建了一個獨立的 Framework - CoreAnimator,與 LSAnimator 具有同樣強大的功能。

LSAnimator - 易於讀寫的多鏈式動畫框架

為什麼要寫 LSAnimator?

嘛~ 其實一開始是為了自己使用哈。

早在去年,所在專案為了優化互動做了比較多的動畫,在實現這些動畫的時候不論是用 CAAnimations 還是 UIView animations 都要寫冗長的程式碼。這樣的程式碼不但書寫的時候手累,維護的時候心也會累,而且由於每一處的動畫互動都有差異,加上日後可能需要隨時修改動畫互動細節,所以一直想弄一個動畫庫來解放我浪費在寫動畫互動實現方面的勞動力。

寫庫之前先去 GitHub 上搜了一下,發現一個動畫庫 JHChainableAnimations 號稱易於讀寫的可鏈式動畫框架,所以就直接拿來用了。

不過在使用的過程中發現這個庫有一個致命的缺陷,就是所有動畫都必須放在一條動畫鏈上,執行完一個再去執行下一個。可是在實際的使用中,我發現很多動畫需求都是一條動畫鏈跑不下來的。

所以我當時就在它的基礎上提升了一個維度,把可鏈式升級為了多鏈式。使用至今還沒遇到過多鏈式動畫無法實現的動畫需求,所以應該算是高可定製化的動畫庫了(笑)。

之後本來想給 JHChainableAnimations 提 PR 的,但是發現它當時已經改版到 v2.0 了。Emmmmm...本來升級為多鏈式改動的程式碼就很大,加上我當時改動的程式碼是 v1.0 的版本,合併程式碼時非常痛苦...索性就自己在 GitHub 上開了一個專案。嘛~ 就是現在的 LSAnimator。

之後也收到了一些 Issues,也有在積極的維護,現在已經和 JHChainableAnimations 的差距不斷拉大了(感覺寫框架是一種樂趣,維護框架是另一種)。

什麼是多鏈式動畫?

CAAnimations 和 UIView animations 已經非常強大了,但是當動畫設計稍微複雜一些時使用它們去實現會讓程式碼變得非常難以閱讀和維護。

假設我想用 spring 時間曲線將 myView 右移 100 點,移動完成之後再用 EaseIn 時間曲線將 myView 的寬度增加 30 點:

使用系統方法實現

[UIView animateWithDuration:2.0
                          delay:0.0
         usingSpringWithDamping:0.8
          initialSpringVelocity:1.0
                        options:0
                     animations:^{
                         CGPoint newPosition = self.myView.frame.origin;
                         newPosition.x += 100;
                         self.myView.frame = CGRectMake(newPosition.x, newPosition.y, self.myView.frame.size.width, self.myView.frame.size.height);
                     } completion:^(BOOL finished) {
                         [UIView animateWithDuration:2.0
                                               delay:0.0
                                             options:UIViewAnimationOptionCurveEaseIn
                                          animations:^{
                                              CGSize newSize = self.myView.frame.size;
                                              newSize.width += 30;
                                              self.myView.frame = CGRectMake(self.myView.frame.origin.x, self.myView.frame.origin.y, newSize.width, newSize.height);
                                          } completion:nil];
                     }];
複製程式碼

Emmmmm...這程式碼很難閱讀,而且不利於維護。

嘛~ 用 LSAnimator 可以一行程式碼搞定。

Using LSAnimator

LSAnimator - 易於讀寫的多鏈式動畫框架

LSAnimator *animator = [LSAnimator animatorWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).increWidth(30).easeIn.animate(2);
複製程式碼

Emmmmm...不過已經有一個名為 JHChainableAnimations 的動畫庫了,使用它也可以做到這一點。

那麼 JHChainableAnimations 存在哪些問題呢?

JHChainableAnimations 具有強大的可連結式動畫,並且語法易於讀/寫,但是它不支援多鏈式動畫

接著上面的例子,假設現在維持上面的動畫需求不變,新加入需求要使 myView 的透明度在上面動畫的整個執行過程中改為 0:

LSAnimator

LSAnimator - 易於讀寫的多鏈式動畫框架

用 LSAnimator 實現的話僅需要新增一行程式碼即可。

LSAnimator *animator = [LSAnimator animatorWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).increWidth(30).easeIn.animate(2);
// Add this line
animator.concurrent.makeOpacity(0).animate(4);
複製程式碼

JHChainableAnimations

LSAnimator - 易於讀寫的多鏈式動畫框架

Emmmmm...使用 JHChainableAnimations 是不能完成這項任務的。嘗試新增下面的程式碼將會引起動畫表現異常甚至閃退。效果就如上面所示,myView 閃了一下透明度直接變為了 0,這顯然不是我們想要的效果。

JHChainableAnimator *animator = [[JHChainableAnimator alloc] initWithView:self.myView];
animator.moveX(100).spring.thenAfter(2).moveWidth(30).easeIn.animate(2);
animator.makeOpacity(0).animate(4);
複製程式碼

LSAnimator VS JHChainableAnimations

  • 多鏈式動畫: 可以實現幾乎所有的動畫設計,比 JHChainableAnimations 靈活而且強大(高了一個維度)。
  • 支援 CALayer: 支援通過 CALayer 初始化,可以直接操作 CALayer 實現動畫, JHChainableAnimations 僅支援 UIView。
  • 引數自動補全: 支援引數自動補全,自動提示所需引數的數量和所屬型別,JHChainableAnimations 並不支援。

LSAnimator 在 . 語法後跟出的方法中自帶了引數提示,包含引數的數量和所屬型別

LSAnimator - 易於讀寫的多鏈式動畫框架

JHChainableAnimations 在 . 語法後跟出的方法並沒有引數提示,使用起來很不方便,特別是不熟悉引數的時候需要 command + left mouse 跟程式碼才能確認所需引數的數量和型別:

LSAnimator - 易於讀寫的多鏈式動畫框架

嘛~ 關於更多的內容和使用說明 LSAnimator 專案介紹已經寫得很詳細了~

最後

如果你已經看到這裡了,那麼無論如何還請進專案頁面看一下哈!

專案初期,歡迎 PR!


補充~ 我建了一個技術交流微信群,想在裡面認識更多的朋友!如果各位同學對文章有什麼疑問或者工作之中遇到一些小問題都可以在群裡找到我或者其他群友交流討論,期待你的加入喲~

LSAnimator - 易於讀寫的多鏈式動畫框架

Emmmmm..由於微信群人數過百導致不可以掃碼入群,所以請掃描上面的二維碼關注公眾號進群。

相關文章