JHChainableAnimations 動(dòng)畫鏈(翻譯)

https://github.com/jinjiantong/JHChainableAnimations

動(dòng)畫怎么了臊诊?

雖然CAAnimations和UIView的動(dòng)畫功能已經(jīng)十分強(qiáng)大了烁峭,但它們還是在將多組動(dòng)畫串連在一起這個(gè)問題上捉襟見肘,尤其是在改變關(guān)鍵點(diǎn)(anchor points字面意思錨點(diǎn))的時(shí)候。

此外,復(fù)雜的動(dòng)畫可讀性差。

假如我要將myView使用彈簧效果向右移動(dòng)五十個(gè)像素响迂,在移動(dòng)完成時(shí),使用淡入改變myView的背景色:

老方法

[UIViewanimateWithDuration:1.0

delay:0.0

usingSpringWithDamping:0.8

initialSpringVelocity:1.0

options:0 animations:^{CGPointnewPosition = self.myView.frame.origin;

newPosition.x +=50;

self.myView.frame.origin = newPosition;

}completion:^(BOOLfinished) {

[UIViewanimateWithDuration:0.5

delay:0.0

options:UIViewAnimationOptionCurveEaseInanimations:^{

self.myView.backgroundColor= [UIColorpurpleColor];

}completion:nil];

}];

真是夠了细疚。蔗彤。。使用JHChainableAnimations僅僅只要一行代碼疯兼。

新方法(JHChainableAnimationsH欢簟!U蚍馈)

self.myView.moveX(50).spring.thenAfter(1.0).makeBackground([UIColorpurpleColor]).easeIn.animate(0.5);

目前已經(jīng)存在不少的相當(dāng)不錯(cuò)的動(dòng)畫庫(kù)啦鸣,例如:RBBAnimation,DCAnimationKit, 和PMTween。但它們?cè)阪溞蛣?dòng)畫和讀寫代碼的簡(jiǎn)便性上沒有好的表現(xiàn)来氧。

用法

復(fù)制JHChainableAnimations里面的文件添加到你的項(xiàng)目诫给,或?qū)⑾旅娴膬?nèi)容添加到你的Podfile

pod 'JHChainableAnimations', '~> 1.3.0'

然后import下面的頭文件

#import"JHChainableAnimations.h"

這是UIView的分類香拉,所以鏈型動(dòng)畫可以在所有導(dǎo)入了上面頭文件的UIView及其子類上使用。

動(dòng)畫

moveX(x)這類鏈接屬性必須放在view和animate(t)方法間中狂。

以下例子展示了怎樣將一個(gè)對(duì)象尺寸放大兩倍的1秒動(dòng)畫凫碌。

View.makeScale(2.0).animate(1.0);

如果你想在縮放同時(shí)移動(dòng)view,添加另外一個(gè)鏈接屬性胃榕。順序不重要盛险。

View.makeScale(2.0).moveXY(100,50).animate(1.0);//等同于view.moveXY(100,50).makeScale(2.0).animate(1.0);

查看所有的鏈性屬性點(diǎn)擊here

鏈接動(dòng)畫

使用thenAfter(t)函數(shù)來分隔動(dòng)畫函數(shù)實(shí)現(xiàn)連接動(dòng)畫。

以下例子展示了怎么在一個(gè)對(duì)象完成了0.5秒的縮放動(dòng)畫之后完成1秒的移動(dòng)動(dòng)畫勋又。(暫時(shí)還沒有寫demo來試過苦掘,可能具體的動(dòng)畫效果不是這樣)

View.makeScale(2.0).thenAfter(0.5).moveXY(100,50).animate(1.0);

動(dòng)畫效果

想要添加動(dòng)畫效果,在你想要應(yīng)用動(dòng)畫效果的鏈性屬性后調(diào)用效果方法楔壤。

以下例子展示了一個(gè)彈簧效果的的縮放鹤啡。

View.makeScale(2.0).spring.animate(1.0);

如果給同一的鏈性屬性添加相同的動(dòng)畫,第二個(gè)將會(huì)關(guān)閉第一個(gè)蹲嚣。

View.makeScale(2.0).bounce.spring.animate(1.0);//等同于view.makeScale(2.0).spring.animate(1.0);

查看所有的動(dòng)畫效果點(diǎn)擊here

延遲

調(diào)用wait(t)或delay(t)鏈性屬性來

以下例子展示了如何延遲0.5秒執(zhí)行移動(dòng)視圖通話递瑰。

View.moveXY(100,50).wait(0.5).animate(1.0);//等同于view.moveXY(100,50).delay(0.5).animate(1.0);

完成

給UIView的animationCompletion屬性賦值或者調(diào)用animateWithCompletion(t,completion)函數(shù)可在動(dòng)畫完成后運(yùn)行需要的代碼。

View.makeX(0).animateWithCompletion(1.0,JHAnimationCompletion(){

NSLog(@"Animation

Done");

});

等同于:

View.animationCompletion =

JHAnimationCompletion(){

NSLog()@"Animation

Done";

}

View.makeX(1).animate(1.0);

等同于:

View.makeX(0).animate(1.0).animationCompletion

= JHAnimationCompletion() {

Nslog(@"Animation

Done");

}

貝賽爾曲線

你也可以UIBezierPath來設(shè)置view的動(dòng)畫隙畜。調(diào)用bezierPahtForAnimation方法抖部,得到一個(gè)以視圖為位置為起點(diǎn)的貝賽爾曲線。給它添加點(diǎn)议惰、曲線慎颗、直線然后在一個(gè)鏈性屬性上使用。

UIBezierPath*path = [view bezierPathForAnimation];

[path

addLineToPoint:CGPintMake(24,400)];

[paht

addLineToPoint:CGPintMake(300,500)];

View.moveOnPath(path).animate(1.0);

動(dòng)畫效果無法用在貝賽爾曲線路徑上言询。

語意(Semantics不知道怎么翻譯好)

我加入了一個(gè)叫做seconds僅僅是用來展示的鏈性屬性哗总。不管怎樣,給代碼添加一點(diǎn)可讀性(如果你喜歡的話)倍试。

View.makeScale(2.0).thenAfter(0.5).secends.moveX(20).animate(1.0);//view.makeScale(2.0).thenAfter(0.5).moveX(20).animate;

自動(dòng)布局

變形

使用變形類的鏈性屬性。對(duì)于被自動(dòng)布局約束的視圖蛋哭,這些是不錯(cuò)的县习。你不會(huì)與其他鏈性屬性混淆。

viewWithConstraints.transformX(50).transformScale(2).animate(1.0);

動(dòng)畫約束

具有代表性的frames設(shè)置和自動(dòng)布局填充不應(yīng)該混淆谆趾,所以在使用makeConstraint和moveConstraint鏈性屬性的時(shí)候要小心(不要嘗試去縮放視圖躁愿,當(dāng)它具有高寬約束的時(shí)候)。這些屬性應(yīng)該只用于顏色沪蓬、透明度彤钟、圓角鏈性屬性因?yàn)樗鼈儾换赜绊憟D層的位置,因此不回影響約束跷叉。

這些僅僅是為動(dòng)畫約束方便添加的語法結(jié)構(gòu)逸雹。以下代碼將設(shè)置topConstraint的constant為50营搅,隱蔽的驅(qū)動(dòng)動(dòng)畫圖層。

// You have a reference to some

constraint for myView

self.topConstraint = [NSLayoutConstraint...];

...

self.myView.makeConstraint(self.topConstraint,50).animate(1.0);

這種代碼也不能添加動(dòng)畫效果梆砸。

swift中使用

在swift中使用JHChainableAnimaton有一點(diǎn)點(diǎn)的不同转质。每個(gè)鏈性屬性必須在哪名字和參數(shù)之間添加()

// swift code

view.makeScale()(2.0).spring().animate()(1.0);

// is the same as

//

view.makeScale(2.0).spring.animate(1.0);

//

in Objective-C

查看更多https://github.com/jinjiantong/JHChainableAnimations

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市帖世,隨后出現(xiàn)的幾起案子休蟹,更是在濱河造成了極大的恐慌,老刑警劉巖日矫,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赂弓,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡哪轿,警方通過查閱死者的電腦和手機(jī)盈魁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缔逛,“玉大人备埃,你說我怎么就攤上這事『峙” “怎么了按脚?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)敦冬。 經(jīng)常有香客問我辅搬,道長(zhǎng),這世上最難降的妖魔是什么脖旱? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任堪遂,我火速辦了婚禮,結(jié)果婚禮上萌庆,老公的妹妹穿的比我還像新娘溶褪。我一直安慰自己,他們只是感情好践险,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布猿妈。 她就那樣靜靜地躺著,像睡著了一般巍虫。 火紅的嫁衣襯著肌膚如雪彭则。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天占遥,我揣著相機(jī)與錄音俯抖,去河邊找鬼。 笑死瓦胎,一個(gè)胖子當(dāng)著我的面吹牛芬萍,可吹牛的內(nèi)容都是我干的尤揣。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼担忧,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼芹缔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瓶盛,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤最欠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后惩猫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芝硬,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年轧房,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拌阴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡奶镶,死狀恐怖迟赃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情厂镇,我是刑警寧澤纤壁,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站捺信,受9級(jí)特大地震影響酌媒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜迄靠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一秒咨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧掌挚,春花似錦雨席、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奇徒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缨硝,已是汗流浹背摩钙。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留查辩,地道東北人胖笛。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓网持,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親长踊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子功舀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

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

  • 1 背景 不能只分析源碼呀,分析的同時(shí)也要整理歸納基礎(chǔ)知識(shí)身弊,剛好有人微博私信讓全面說說Android的動(dòng)畫辟汰,所以今...
    未聞椛洺閱讀 2,693評(píng)論 0 10
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,519評(píng)論 25 707
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜阱佛,今天將帶大家一窺iOS動(dòng)畫全貌帖汞。在這里你可以看...
    F麥子閱讀 5,094評(píng)論 5 13
  • 普通的小料珠子:俗稱通貨類,全自動(dòng)機(jī)器產(chǎn)品凑术。缺點(diǎn)是有瑕疵翩蘸,有不圓的情況和色差較大,此類珠子價(jià)格較低淮逊。 較好的珠子:...
    史上最全小葉紫檀百科閱讀 277評(píng)論 0 0
  • 知道要隨順父母催首,不與他們爭(zhēng)執(zhí)要明理,但回到現(xiàn)實(shí)生活中總難免就范泄鹏,弄得氣鼓暖漲家人不得安寧郎任。
    許可_671e閱讀 102評(píng)論 0 0