將會分三篇深入介紹三個流行的swift開源動畫庫:
先從IBAnimatable開始因?yàn)樽髡咴谖⒉┥媳容^活躍:@林永堅Jake。這位同學(xué)在慕課網(wǎng)上也有幾個關(guān)于動畫設(shè)計的入門課程:iOS-動畫入門黑忱,iOS動畫案例之會跳舞的界面贮配。
介紹
IBAnimatable 是一個幫助我們在 Interface Builder 和 Swift Playground 里面設(shè)計 UI, 交互, 導(dǎo)航模式, 換場和動畫的開源庫驯杜。
上圖中整個 App 都是通過 IBAnimatable 在 Interface Builder 設(shè)計完成葵腹,沒有任何一行代碼饮潦。
使用場景
- 制作原型 - 使用 IBAnimatable 快速地執(zhí)行可交互的原型南捂。
- 在 Interface Builder 里面快速實(shí)現(xiàn) - 把 Sketch 的 UI 或者 Framer Studio 的原型在 Interface Builder 快速實(shí)現(xiàn),不需要編寫任何代碼缸兔。
- 制作自定義控件 - 使用 IBAnimatable 的 extension 制作另外的控件庫日裙,例如 Material 控件等。
起源
可以直接通過xib而不需要些代碼來完成動畫這個想法在OC的時代就存在惰蜜。OC時這個方面的庫是Canvas昂拂,4000+stars。
但是當(dāng)時Xcode沒有@IBInspectable這個特性抛猖。所以只能通過key path設(shè)置格侯。使用起來像下面這樣略苦逼。
代碼實(shí)現(xiàn)
這個部分我們來關(guān)注下代碼的實(shí)現(xiàn)财著。
先進(jìn)的面向協(xié)議編程
代碼的復(fù)用通過protocol實(shí)現(xiàn)联四,在protocol的extension進(jìn)行實(shí)現(xiàn)。符合swift這門的語言的現(xiàn)代特性瓢宦,對于擴(kuò)展可以靈活的支持
舉例來說界面支持直接設(shè)置圓角這個功能的實(shí)現(xiàn)碎连。
在CornerDesignable協(xié)議中定義了cornerRadius屬性,在extension中實(shí)現(xiàn)了與之對應(yīng)的設(shè)置圓角的方法驮履。并且這個接口聲明了只有UIView的類型才能實(shí)現(xiàn)鱼辙。
接著在需要支持界面設(shè)置的對象上實(shí)現(xiàn)這個接口就可以了廉嚼。
<pre><code>
@IBDesignable public class AnimatableView: UIView, CornerDesignable
</code></pre>
這樣這個屬性就可以在界面設(shè)置后生效。
支持大量的屬性在xib中設(shè)置
這個庫一大亮點(diǎn)就支持了大量的常用的需要設(shè)置的屬性倒戏。從以下xxDesignable的協(xié)議就能看出怠噪。
<pre><code>
CornerDesignable, FillDesignable, BorderDesignable, RotationDesignable, ShadowDesignable, BlurDesignable, TintDesignable, GradientDesignable, MaskDesignable
</code></pre>
相對的。在屬性設(shè)置面板中你可以看到這些屬性杜跷。
支持大量的動畫
動畫的實(shí)現(xiàn)與上面類似傍念。在Animatable中實(shí)現(xiàn)了一些可以配置的動畫相關(guān)的參數(shù)。
要提的是animationType葛闷。作者細(xì)心的實(shí)現(xiàn)了很多常見的動畫憋槐,超過50個預(yù)置動畫。
總結(jié)
上手容易淑趾,代碼邏輯容易理解阳仔。與時俱進(jìn)的面向協(xié)議的設(shè)計思維。代碼的命名規(guī)范扣泊。作者也在積極的維護(hù)近范,很快支持了swift2.2.
特點(diǎn)就是給與在xib中設(shè)置UI和常見動畫提供了強(qiáng)大的支持。如作者所說延蟹,如果利用Xcode做原型這個庫無疑是最佳選擇评矩。
但是雖然這個庫支持也用代碼來寫動畫,但是我覺得這個部分的接口設(shè)計不夠好阱飘。
<pre><code>
// 這是 "Animate in Swift Playground" Gif 動畫的源代碼斥杜,把好幾個動畫串聯(lián)起來執(zhí)行。
view.squeezeInDown{ view.pop { view.shake{ view.squeeze{ view.wobble{ view.flipX { view.flash{ view.flipY { view.fadeOutDown() } } } } } } } }
</code></pre>
這是介紹中的一段源碼俯萌。這樣的調(diào)用閱讀性很差果录。
對于大中型的app我覺得這個庫的作用是有限的上枕,畢竟用xib設(shè)置的地方就很不多咐熙,如果有太多定制的動畫,這個庫也作用有限辨萍。
但是因?yàn)檫@個庫通過協(xié)議很好的做到了解耦棋恼,把里面某些協(xié)議自己自定義整合到項(xiàng)目中我覺得會是更好的做法。