iOS動(dòng)畫(二) - UIKit Dynamics動(dòng)力系統(tǒng)

1.什么是動(dòng)力系統(tǒng)(What is the UIKit Dynamics?)

動(dòng)力系統(tǒng)的引入埃脏,并不是替代CoreAnimation搪锣,而是對(duì)模擬現(xiàn)實(shí)世界物體運(yùn)動(dòng)的補(bǔ)充,比如彩掐,碰撞构舟,重力,懸掛等等堵幽。所以說狗超,UIKit動(dòng)力系統(tǒng)的引入,大大簡(jiǎn)化了一些交互動(dòng)畫(不需要自己實(shí)現(xiàn)一些模擬現(xiàn)實(shí)世界物理動(dòng)力系統(tǒng)的動(dòng)畫)朴下,豐富了UI設(shè)計(jì)努咐。

2.動(dòng)力系統(tǒng)怎么使用(How to use it?)

UIKit動(dòng)力系統(tǒng)結(jié)構(gòu)如下:

image

總的來說,先要注冊(cè)UI系統(tǒng)體系桐猬,也就是類似于二維的坐標(biāo)系麦撵,然后添加所需的行為以及行為的作用物體,然后該物體就能在設(shè)定的坐標(biāo)體系里,根據(jù)所添加的行為運(yùn)動(dòng)免胃。

光說不練乃是紙上談兵音五,沒有成效。下面分解動(dòng)力系統(tǒng)所包含的幾類運(yùn)動(dòng)羔沙。

UIGravityBehavior

重力躺涝,這個(gè)大家應(yīng)該都很熟悉了。我們每天都能感受到它的存在扼雏,所謂腳踏實(shí)地就是這種感覺坚嗜。小時(shí)候,大家應(yīng)該都有過從高處把一些物體扔下來诗充,或者直接讓它坐自由落體運(yùn)動(dòng)苍蔬,相似的,這個(gè)Gravity也是模擬重力行為蝴蜓,下面直接上代碼碟绑。

myAnimator = [[UIDynamicAnimator alloc] initWithReferenceView: self];
myAnimator.delegate = self;
UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems: @[ball]];
[myAnimator addBehavior: gravityBehavior];

1.UIDynamicAnimator就是一個(gè)播放者,容器茎匠。一個(gè)容納動(dòng)力系統(tǒng)的環(huán)境格仲,而referenceView就是該環(huán)境的坐標(biāo)系,物體運(yùn)動(dòng)的參照系诵冒。

  1. gravityBehavior凯肋,初始化一個(gè)重力行為,行為的受力物體是ball(只要實(shí)現(xiàn)UIDynamicItem接口的類都能作為受力物體汽馋,如侮东,View和UICollectionViewLayoutAttributes)。
  2. 將這個(gè)行為添加到UIDynamicAnimator上面就行了豹芯。
  3. 顯示效果的Demo以及代碼下載在最后苗桂。

UICollisionBehavior

碰撞行為,最直接的感受就是告组,玩彈珠,一顆彈珠可以被另一顆彈珠彈射到很遠(yuǎn)的地方癌佩,原理就是碰撞產(chǎn)生了一個(gè)反方向的作用力木缝,遠(yuǎn)離事故發(fā)生地。廢話也不多說围辙,直接上代碼:

myAnimator = [[UIDynamicAnimator alloc] initWithReferenceView: self];

UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems: ballsArray2];        collision.translatesReferenceBoundsIntoBoundary = YES;
collision.collisionDelegate = self;
[myAnimator addBehavior: collision];

1.和重力行為一樣我碟,也要先初始化一個(gè)容器myAnimator。

2.添加碰撞行為collision姚建,collision.translatesReferenceBoundsIntoBoundary的屬性是否設(shè)置以參考View的邊界為碰撞邊界矫俺,我們這里選擇YES。

3.除了設(shè)置參考View的邊界為碰撞邊界外,還可以自己設(shè)定邊界厘托,使用- addBoundaryWithIdentifier: forPath:或者addBoundaryWithIdentifier: fromPoint: toPoint:方法可以自己設(shè)定碰撞邊界的范圍友雳。
4。最后铅匹,也需要把collision添加到myAnimator上押赊。

UIAttachmentBehavior

描述一個(gè)物體和一個(gè)錨點(diǎn)或者另一個(gè)物體的連接,可以是彈性的包斑,也可以是非彈性的連接流礁。直接上代碼:

UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem: square offsetFromCenter: UIOffsetMake(0, - 40) attachedToAnchor: anchor];
attachmentBehavior.length = 100;
attachmentBehavior.damping = 0.3;
[myAnimator addBehavior: attachmentBehavior];

1.物體默認(rèn)的錨點(diǎn)在中心,可以設(shè)置偏移罗丰。

2.步驟也是和其它得行為一樣神帅,設(shè)置參數(shù),把該行為添加到myAnimator上萌抵。

3.更多的方法和屬性找御,請(qǐng)自行參考蘋果官方文檔。

UISnapBehavior

吸附行為谜嫉,將UIView通過動(dòng)畫吸附到某個(gè)點(diǎn)上萎坷。API非常簡(jiǎn)單,看下面代碼就懂了沐兰。

UISnapBehavior *snapBehavior = [[UISnapBehavior alloc] initWithItem: ballView snapToPoint: centerBall.center];
snapBehavior.damping = 0.4;
[myAnimator addBehavior: snapBehavior];

UIPushBehavior

推動(dòng)力哆档,可以理解為向一個(gè)物體施加一個(gè)作用力,可以是持續(xù)的住闯,也可以是瞬間的沖擊瓜浸。

UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems: @[square] mode: UIPushBehaviorModeInstantaneous];
pushBehavior.pushDirection = CGVectorMake(velocity.x / 1000, velocity.y / 1000);
[myAnimator addBehavior: pushBehavior];

UIDynamicItemBehavior

這其實(shí)不是一種行為,我的理解是對(duì)于將要進(jìn)行各種行為的物體一些參數(shù)上面的設(shè)置比原,比如插佛,彈力,震蕩頻率量窘,密度等等雇寇。

UIDynamicItemBehavior *behavior3 = [[UIDynamicItemBehavior alloc] initWithItems: @[ballsArray2[2]]];
behavior3.elasticity = 0.5;
behavior3.friction = 0.3;
behavior3.resistance = 0.3;
[myAnimator addBehavior: behavior3];

3.組合(Group)

所有的行為都可以組合起來,如碰撞和重力蚌铜,可以類似于物體做自由落體運(yùn)動(dòng)锨侯,然后和地面碰撞。代碼如下:

myAnimator = [[UIDynamicAnimator alloc] initWithReferenceView: self];
//重力行為
UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems: @[ball]];
[myAnimator addBehavior: gravity];

//碰撞行為
UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems: @[ball]];
collision.translatesReferenceBoundsIntoBoundary = YES;
collision.collisionDelegate = self;
[myAnimator addBehavior: collision];

//設(shè)置物體的一些相關(guān)的參數(shù)
UIDynamicItemBehavior *behavior = [[UIDynamicItemBehavior alloc] init];
behavior.elasticity = 0.8;
behavior.friction = 0.2;
behavior.resistance = 0.3;
behavior.density = 0.5;
behavior.angularResistance = 0.2;
[behavior addItem: ball];
[myAnimator addBehavior: behavior];

4.自定義行為(DIY)

1.將官方的行為打包

  • 繼承UIDynamicBehavior(一個(gè)抽象類)
  • 實(shí)現(xiàn)添加組合行為的方法冬殃,最好和官方的保持一致囚痴,比如:initWithItems:,在里面調(diào)用addChildBehavior:方法添加需要組合的行為
  • 初始化該繼承類审葬,然后使用
@interface GravityWithCollisionBehavior : UIDynamicBehavior

- (instancetype)initWithItems: (NSArray *)items;

@end

@implementation GravityWithCollisionBehavior

- (instancetype)initWithItems: (NSArray *)items {
    self = [super init];
    if (self) {
        UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems: items];
        [self addChildBehavior: gravityBehavior];
        UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems: items];
        collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
        [self addChildBehavior: collisionBehavior];
    }
    return self;
}

@end

2.完全自定義行為

UIDynamicBehavior里提供了一個(gè)@property(nonatomic, copy) void (^action)(void)深滚,animator將會(huì)在行為發(fā)生期間奕谭,每一步都調(diào)用這個(gè)block。也就是說痴荐,你想自定義行為就得在這里寫自己的一些代碼血柳。具體就是在這個(gè)block中向所有的item詢問它們當(dāng)前的center和transform狀態(tài),然后經(jīng)過計(jì)算蹬昌,把新的值賦予相應(yīng)的item混驰,從而該改變它們?cè)谄聊簧系奈恢茫笮≡矸罚嵌绕苷ィ较虻鹊取?/p>

5.終結(jié)(Summary)

總的來說,iOS7引進(jìn)的這套動(dòng)力系統(tǒng)明刷,大大豐富了我們動(dòng)畫表達(dá)婴栽,但是,該系統(tǒng)有著一些限制辈末,會(huì)消耗一定的CPU資源愚争,并且,當(dāng)它們被添加到動(dòng)畫系統(tǒng)后挤聘,只能通過動(dòng)畫系統(tǒng)改變位置轰枝,而外部對(duì)于UIDynamicsItem的center,transform等設(shè)定是被忽略的,除此之外组去,該系統(tǒng)也沒有現(xiàn)實(shí)世界那么精確鞍陨,當(dāng)計(jì)算迭代無法得到有效解的時(shí)候,動(dòng)畫將無法得到正確的呈現(xiàn)从隆,所以诚撵,不要將動(dòng)力系統(tǒng)神化。

6.Demo展示

UIDynamicAnimator
UIDynamicAnimator

源碼下載

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末键闺,一起剝皮案震驚了整個(gè)濱河市寿烟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辛燥,老刑警劉巖筛武,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異挎塌,居然都是意外死亡畅铭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門勃蜘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人假残,你說我怎么就攤上這事缭贡÷茫” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵阳惹,是天一觀的道長(zhǎng)谍失。 經(jīng)常有香客問我,道長(zhǎng)莹汤,這世上最難降的妖魔是什么快鱼? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮纲岭,結(jié)果婚禮上抹竹,老公的妹妹穿的比我還像新娘。我一直安慰自己止潮,他們只是感情好窃判,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著喇闸,像睡著了一般袄琳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上燃乍,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天唆樊,我揣著相機(jī)與錄音,去河邊找鬼刻蟹。 笑死逗旁,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的座咆。 我是一名探鬼主播痢艺,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼介陶!你這毒婦竟也來了堤舒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤哺呜,失蹤者是張志新(化名)和其女友劉穎舌缤,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體某残,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡国撵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了玻墅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片介牙。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖澳厢,靈堂內(nèi)的尸體忽然破棺而出环础,到底是詐尸還是另有隱情囚似,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布线得,位于F島的核電站饶唤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏贯钩。R本人自食惡果不足惜募狂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望角雷。 院中可真熱鬧祸穷,春花似錦、人聲如沸谓罗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)檩咱。三九已至揭措,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間刻蚯,已是汗流浹背绊含。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留炊汹,地道東北人躬充。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像讨便,于是被迫代替她去往敵國(guó)和親充甚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

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

  • iOS 7增加了UIKit Dynamics庫(kù),其集成于UIKit框架中,將2D物理引擎引入了UIKit坯癣,提供了以...
    pro648閱讀 2,786評(píng)論 2 14
  • 111. [動(dòng)畫系統(tǒng)]如何將其他類型的動(dòng)畫轉(zhuǎn)換成關(guān)鍵幀動(dòng)畫纺座? 動(dòng)畫->點(diǎn)緩存->關(guān)鍵幀 112. [動(dòng)畫]Unit...
    胤醚貔貅閱讀 12,955評(píng)論 3 90
  • 本文譯自UIKit Dynamics Tutorial: Getting Started iOS鼓勵(lì)開發(fā)者設(shè)計(jì)ap...
    康富貴閱讀 790評(píng)論 0 4
  • 本文中所有代碼演示均有GitHub源碼膊畴,點(diǎn)擊下載 UIDynamic簡(jiǎn)介 簡(jiǎn)介:UIKit動(dòng)力學(xué)最大的特點(diǎn)是將現(xiàn)實(shí)...
    si1ence閱讀 10,201評(píng)論 8 79
  • UIKit動(dòng)力學(xué)最大的特點(diǎn)是將現(xiàn)實(shí)世界動(dòng)力驅(qū)動(dòng)的動(dòng)畫引入了UIKit,比如重力,鉸鏈連接,碰撞衰倦,懸掛等效果,即將2...
    BarleyZ閱讀 1,264評(píng)論 0 49