iOS主流動畫開源庫深入分析(一):IBAnimatable

將會分三篇深入介紹三個流行的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è)計完成葵腹,沒有任何一行代碼饮潦。


Storyboard.jpg

使用場景

  • 制作原型 - 使用 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)目中我覺得會是更好的做法。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锈玉,一起剝皮案震驚了整個濱河市爪飘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拉背,老刑警劉巖师崎,帶你破解...
    沈念sama閱讀 210,835評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異椅棺,居然都是意外死亡犁罩,警方通過查閱死者的電腦和手機(jī)齐蔽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,900評論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來床估,“玉大人含滴,你說我怎么就攤上這事∝の祝” “怎么了谈况?”我有些...
    開封第一講書人閱讀 156,481評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長递胧。 經(jīng)常有香客問我碑韵,道長,這世上最難降的妖魔是什么缎脾? 我笑而不...
    開封第一講書人閱讀 56,303評論 1 282
  • 正文 為了忘掉前任泼诱,我火速辦了婚禮,結(jié)果婚禮上赊锚,老公的妹妹穿的比我還像新娘治筒。我一直安慰自己,他們只是感情好舷蒲,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,375評論 5 384
  • 文/花漫 我一把揭開白布耸袜。 她就那樣靜靜地躺著,像睡著了一般牲平。 火紅的嫁衣襯著肌膚如雪堤框。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,729評論 1 289
  • 那天纵柿,我揣著相機(jī)與錄音蜈抓,去河邊找鬼。 笑死昂儒,一個胖子當(dāng)著我的面吹牛沟使,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播渊跋,決...
    沈念sama閱讀 38,877評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼腊嗡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拾酝?” 一聲冷哼從身側(cè)響起燕少,我...
    開封第一講書人閱讀 37,633評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蒿囤,沒想到半個月后客们,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,088評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,443評論 2 326
  • 正文 我和宋清朗相戀三年底挫,在試婚紗的時候發(fā)現(xiàn)自己被綠了嗽桩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,563評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡凄敢,死狀恐怖碌冶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情涝缝,我是刑警寧澤扑庞,帶...
    沈念sama閱讀 34,251評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站拒逮,受9級特大地震影響罐氨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滩援,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,827評論 3 312
  • 文/蒙蒙 一栅隐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧玩徊,春花似錦租悄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至畔塔,卻和暖如春潭辈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背澈吨。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評論 1 264
  • 我被黑心中介騙來泰國打工把敢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谅辣。 一個月前我還...
    沈念sama閱讀 46,240評論 2 360
  • 正文 我出身青樓修赞,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屈藐。 傳聞我的和親對象是個殘疾皇子榔组,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,435評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫熙尉、插件联逻、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,058評論 4 62
  • 看過一部電影,叫《托斯卡尼的陽光》检痰。 女主人公Frances是一位美國作家包归,卻忙碌于寫書評,婚姻失敗如泰山般壓得她...
    古小墨閱讀 439評論 0 0
  • 在這個百無聊賴的雙休日铅歼,突然接到一個朋友之邀公壤,到雙牌桐子坳觀賞銀杏樹换可。這對于一個正苦于何處游玩的我來說,真...
    竹風(fēng)雨閱讀 445評論 0 0
  • 靜坐46分鐘厦幅,兩次沾鳄,較之前投入,再接再厲
    happyooo閱讀 103評論 0 0