iOS UIKit Dynamics(物理碰撞,動(dòng)畫)

大部分人或許覺得動(dòng)畫用UIView 或是CoreAnimation的動(dòng)畫效果,那為何還需要UIKit 中的UIDynamic?
答:UIDynamic 為使用者提供更符合現(xiàn)實(shí)效果的互動(dòng)行為(比如:自由落體能量消耗的過程)

一歹茶、需求:請(qǐng)實(shí)現(xiàn)下圖所示的動(dòng)畫效果(物理碰撞)

JJ's Animation.gif

二、上面引入過UIDynamic 可以實(shí)現(xiàn)碰撞的物理效果動(dòng)畫你弦,how to start ?

  • 在工程中導(dǎo)入U(xiǎn)IKit惊豺,從Headers 找一些UIDynamic,發(fā)現(xiàn)了UIDynamicAnimator.h,UIDynamicBehavior,UIDynamicItemBehavior
  • 既然是要?jiǎng)赢嬓Ч?那就應(yīng)該是UIDynamicAnimator.h
  • UIDynamicAnimator.h 頭文件去查看注釋
// When you initialize a dynamic animator with this method, you should only associates views with your behaviors.
// the behaviors (and their dynamic items) that you add to the animator employ the reference view’s coordinate system.
- (instancetype)initWithReferenceView:(UIView *)view NS_DESIGNATED_INITIALIZER;
  • 大概意思是使用這個(gè)初始化方法的時(shí)候鳖目,需要為你的試圖關(guān)聯(lián)behaviors
  • what's the behaviors ? jump into defination 然而還不是很懂扮叨,UIDynamicBehavior,那就查看API (注意文檔中的如下描述)。
  • This parent class, UIDynamicBehavior, is inherited by the primitive dynamic behavior classes UIAttachmentBehavior, UICollisionBehavior, UIGravityBehavior, UIDynamicItemBehavior, UIPushBehavior, and UISnapBehavior.
  • 文檔中提到UIDynamicBehavior的父類领迈,那么UIDynamicBehavior父類(Dynamic 行為相關(guān)類)描述什么行為呢彻磁?
    • UIAttachmentBehavior:附著行為
    • UICollisionBehavior:碰撞行為
    • UIGravityBehavior:重力行為
    • UIDynamicItemBehavior:動(dòng)態(tài)元素行為
    • UIPushBehavior:推行為
    • UISnapBehavior:吸附行為
  • 上述的各種行為可單獨(dú)使用,也可以組合使用更復(fù)雜的動(dòng)畫效果狸捅。

解決方案的思路就引導(dǎo)到這邊衷蜓,也就可以實(shí)現(xiàn)上述需求。Dynamic 行為相關(guān)類的屬性可自行研究尘喝。

三磁浇、解決方案。

  • 上述需求的解決方案(我這邊用的是6sP的模擬器奧朽褪,因?yàn)樵谠O(shè)置floor的y坐標(biāo)是600)
  • 既然是球落地效果置吓,必然有兩個(gè)模擬對(duì)象:floor无虚,basketBall
    • 1.創(chuàng)建UIDynamicAnimator 對(duì)象
      self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

    • 2.剛剛在API 看到了初始化UIDynamicAnimator需要關(guān)聯(lián)一個(gè)或者多個(gè)行為

NSArray *animatorObjects = @[self.imageV1];
 // 剛剛在API 看到了初始化UIDynamicAnimator需要關(guān)聯(lián)一個(gè)或者多個(gè)行為
 self.gravityBehav = [[UIGravityBehavior alloc] initWithItems:animatorObjects];
 self.colision = [[UICollisionBehavior alloc] initWithItems:animatorObjects];
     ```
   -  3.如果你想監(jiān)聽碰撞的狀態(tài),可以設(shè)置一下代理
   ```
 self.colision.collisionDelegate = self;
   ```
   - 4.設(shè)置碰撞邊界
   ```
[self.colision addBoundaryWithIdentifier:@"boundaryLine" fromPoint:CGPointMake(0, 600) toPoint:CGPointMake(SCREENWITH, 600)];
   ```
   - 5.設(shè)置動(dòng)態(tài)行為參數(shù)
     ```
// 設(shè)置動(dòng)態(tài)行為參數(shù)
 UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:animatorObjects];
 // 設(shè)置彈性
 [itemBehavior setElasticity:0.5];
     ```
   - 6.行為創(chuàng)建了衍锚,別忘了給animator添加上
     ```
[self.animator addBehavior:self.gravityBehav];
 [self.animator addBehavior:self.colision];
 [self.animator addBehavior:itemBehavior];
     ```

### 三友题、下面代碼只能說功能實(shí)現(xiàn)
 - PS:以下代碼不符合代碼書寫規(guī)范
 
```objc
//
// ViewController.m
// DynamicAnimation
//
// Created by JeversonJee on 16/5/27.
// Copyright ? 2016年 JeversonJee. All rights reserved.
//

#import "ViewController.h"

#define SCREENWITH [UIScreen mainScreen].bounds.size.width
#define SCREENHEIGHT [UIScreen mainScreen].bounds.size.height

@interface ViewController ()<UICollisionBehaviorDelegate>

@property (nonatomic, strong) UIDynamicAnimator *animator;
@property (nonatomic, strong) UIGravityBehavior *gravityBehav;
@property (nonatomic, strong) UICollisionBehavior *colision;

@property (nonatomic, strong) UIImageView *imageV1;
@property (nonatomic, strong) UIImageView *imageV2;

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
 [self jjCollisionBehav];
}

- (void)jjCollisionBehav {
 // 創(chuàng)建碰撞需要的對(duì)象
 [self jjCreateBall];
 [self jjCreateFloor];
 // 創(chuàng)建UIDynamicAnimator 對(duì)象
 self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

 NSArray *animatorObjects = @[self.imageV1];
 // 剛剛在API 看到了初始化UIDynamicAnimator需要關(guān)聯(lián)一個(gè)或者多個(gè)行為
 self.gravityBehav = [[UIGravityBehavior alloc] initWithItems:animatorObjects];
 self.colision = [[UICollisionBehavior alloc] initWithItems:animatorObjects];
 // 這里設(shè)置代理是為了監(jiān)聽碰撞狀態(tài)的,可以去了解一下代理方法
 self.colision.collisionDelegate = self;

 // 設(shè)置碰撞邊界
 [self.colision addBoundaryWithIdentifier:@"boundaryLine" fromPoint:CGPointMake(0, 600) toPoint:CGPointMake(SCREENWITH, 600)];
 // 設(shè)置動(dòng)態(tài)行為參數(shù)
 UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:animatorObjects];
 // 設(shè)置彈性
 [itemBehavior setElasticity:0.5];

 // 創(chuàng)建了行為需要animator添加
 [self.animator addBehavior:self.gravityBehav];
 [self.animator addBehavior:self.colision];
 [self.animator addBehavior:itemBehavior];

}

-(void)collisionBehavior:(UICollisionBehavior *)behavior endedContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier {

 NSLog(@"collisionBehavior=%@", item);
 NSString *identifierStr = [NSString stringWithFormat:@"%@", identifier];
 NSLog(@"s=%@", identifier);
 if ( [identifierStr isEqualToString:@"boundaryLine"] ) {
   [self.imageV2 setBackgroundColor:[UIColor grayColor]];
   [UIView animateWithDuration:2 animations:^(void){
     [self.imageV2 setBackgroundColor:[UIColor grayColor]];
   }];
 }

}

-(void)jjCreateBall {

 _imageV1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"basketBall"]];
 _imageV1.frame = CGRectMake(100, 100, 60, 60);
 [self.view addSubview:_imageV1];
}

- (void)jjCreateFloor {

 _imageV2 = [[UIImageView alloc] init];

 [_imageV2 setBackgroundColor:[UIColor grayColor]];
 _imageV2.frame = CGRectMake(0, 600, SCREENWITH, SCREENHEIGHT - 400);
 [self.view addSubview:_imageV2];
}

-(void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

四戴质、UIDynamicDemo:GitHub/jeversonjee點(diǎn)擊下載

The last but not least:
1.如果想更好的玩轉(zhuǎn)UIDynamics請(qǐng)查閱fancypixel有關(guān)Playing With UIDynamics in iOS 9
PS:1.錄屏 Gif (for Mac)軟件:GIPHY CAPTURE
2.那個(gè)boundary(邊界)設(shè)置的適合下面的floor是一樣高的度宦,我選的圖片是有白色背景的方形(Rect),沒有把背景改成透明的告匠,會(huì)感覺到球的底面沒有和floor 重合的感覺戈抄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市后专,隨后出現(xiàn)的幾起案子划鸽,更是在濱河造成了極大的恐慌,老刑警劉巖行贪,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漾稀,死亡現(xiàn)場離奇詭異模闲,居然都是意外死亡建瘫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門尸折,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啰脚,“玉大人,你說我怎么就攤上這事实夹¢吓ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵亮航,是天一觀的道長荸实。 經(jī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
  • 文/蒼蘭香墨 我猛地睜開眼涧窒,長吁一口氣:“原來是場噩夢(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ú)居荒郊野嶺守林人離奇死亡锅减,尸身上長有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
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至潮改,卻和暖如春狭郑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背汇在。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來泰國打工翰萨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人糕殉。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓亩鬼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親阿蝶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子雳锋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

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

  • 本文中所有代碼演示均有GitHub源碼,點(diǎn)擊下載 UIDynamic簡介 簡介:UIKit動(dòng)力學(xué)最大的特點(diǎn)是將現(xiàn)實(shí)...
    si1ence閱讀 10,203評(píng)論 8 79
  • 目錄 ** UIView 動(dòng)畫 ** ** Core Animation ** ** FaceBook POP動(dòng)畫...
    方向_4d0d閱讀 1,585評(píng)論 0 3
  • UIKit Dynamics 是 iOS 7 中基于物理動(dòng)畫引擎的一個(gè)新功能--它被特別設(shè)計(jì)使其能很好地與 col...
    評(píng)評(píng)分分閱讀 810評(píng)論 0 12
  • 前言: UIKit Dynamics是iOS7.0新增的一組類和方法羡洁,可以賦予UIView逼真的行為和特征玷过,從而改...
    Y_小蔥閱讀 641評(píng)論 1 1
  • @柏雪有管理圖紙的案例,大連船柴筑煮、齊齊哈爾車輛廠辛蚊、大連萬達(dá)都管理過圖紙,以齊齊哈爾用的最全面真仲、最好
    阿連格格閱讀 26評(píng)論 0 0