UIDynamic簡介

• 簡介：

  • UIKit動力學最大的特點是將現實世界動力驅動的動畫引入了UIKit，比如動力，鉸鏈連線，碰撞，懸掛等效果，即將2D物理引擎引入了UIKit。
  • 注意：UIKit動力學的引入，並不是為了替代CA或者UIView動畫，在絕大多數情況下CA或者UIView動畫仍然是最有方案，只有在需要引入逼真的互動設計的時候，才需要使用UIKit動力學它是作為現有互動設計和實現的一種補充。

• 其他2D模擬引擎：

  • BOX2D:C語言框架，免費
  • Chipmunk:C語言框架免費，其他版本收費

UIDynamic中的三個重要概念

• Dynamic Animator：動畫者，為動力學元素提供物理學相關的能力及動畫，同時為這些元素提供相關的上下文，是動力學元素與底層iOS物理引擎之間的中介，將Behavior物件新增到Animator即可實現動力模擬。

• Dynamic Animator Item:動力學元素，是任何遵守了UIDynamic協議的物件，從iOS7開始，UIView和UICollectionViewLayoutAttributes預設實現協議，如果自定義物件實現了該協議，即可通過Dynamic Animator實現物理模擬。

• UIDynamicBehavior:模擬行為，是動力學行為的父類，基本的動力學行為類UIGravityBehavior、UICollisionBehavior、UIAttachmentBehavior、UISnapBehavior、UIPushbehavior以及UIDynamicItemBehavior均繼承自該父類。

專案搭建演練

• 模擬重力體驗物理模擬效果

• 要使用物理模擬，最基本的使用步驟是：

  • 1> 要有一個 模擬者[UIDynamicAnimator] 用來模擬所有的物理行為
  • 2> 要有物理 模擬行為[如重力UIGravity] 用來模擬重力的行為
  • 3> 將物理模擬行為新增給模擬者實現模擬效果。

• 第一種情況——重力模擬

    // 1. 誰來模擬？UIDynamicAnimator來負責模擬
    UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
  
    // 2. 仿真個什麼動作？自由落體
   
  
    UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[view, redView]];
  
    // 3. 開始模擬
    [animator addBehavior:gravity];

• 重力模擬效果圖
  
  01重力效果無邊界檢測.gif

• 第二種情況——增加邊緣檢測

  • 預設情況下沒有任何阻擋控制元件直接掉出螢幕，可以通過新增邊緣檢測行為防止掉出。

    // 3. 碰撞檢測
    UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[view, redView]];
    // 設定不要出邊界，碰到邊界會被反彈
    collision.translatesReferenceBoundsIntoBoundary = YES;
    
    // 4. 開始模擬
    [animator addBehavior:collision];

• 增加邊緣檢測效果圖

02重力有邊界.gif

• 第三種情況——旋轉
  • 讓控制元件旋轉45°後，控制元件並不會倒下，因為控制元件的重心就在45°的那條線上。
  • 如果修改為別的角度就會倒下

    view.transform = CGAffineTransformMakeRotation(M_PI_4);

• 旋轉效果圖

03旋轉.gif

• 第四種情況——碰撞
• 再增加一個紅色的控制元件的時候就會發生碰撞的效果。
• 碰撞效果圖

專案框架搭建

一、結構分析

• 為了演示其他的幾種行為效果，案例中需要用到

  • UINavigationController[導航控制器]，根控制器為列表控制器
  • UITableViewController[列表控制器]，用來展示所有的行為列表
  • UIViewController[普通控制器]，用來演示各種不同行為的效果

• 在顯示各種行為的普通控制器中有2個共同點：

  • 相同的背景效果
  • 都有一個小方塊

• 所以為了避免每個行為都要寫一個控制器，然後寫對應的背景及方塊圖片程式碼，就抽出一個示例控制器，用來顯示所有的行為效果

  • 只不過示例控制器要載入和顯示的view，要根據要展示的行為去載入不同的view（多型的合理運用）

二、程式碼實現

1> 列表控制器

• 第一步載入顯示導航控制器及列表控制器

  • 通過屬性列表或者資料來源的方式載入所有的行為名詞

    _dynamicArr = @[@"吸附行為", @"推動行為", @"剛性附著行為", @"彈性附著行為", @"碰撞檢測"];

  • 通過給組尾設定一個空的view來隱藏多餘行

    self.tableView.tableFooterView = [[UIView alloc] init];

  • 實現資料來源方法顯示出來

    #pragma mark - 資料來源方法
      // 幾行
      - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
          return _dynamicArr.count;
      }
    
      // 每行的具體內容
      - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
          // 1. 設定可重用識別符號
          static NSString *ID = @"cell";
    
          // 2. 根據可重用識別符號去tableView 快取區去取
          UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
          // 3. 設定每行cell 的文字
          cell.textLabel.text = _functions[indexPath.row];
    
          return cell;
    }

• 列表控制器效果圖

05行為列表.png

2> 跳轉到演示控制器

• 實現代理方法，實現跳轉

• 在跳轉的時候將索引及cell的標題傳過去

    #pragma mark - 代理方法
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  
    // 1. 例項化一個模擬管理器
    WPFDemoController *demoVc = [[WPFDemoController alloc] init];
  
    // 2. 設定標題
    demoVc.title = _dynamicArr[indexPath.row];
  
    // 3. 傳遞功能型別
    demoVc.function = (int)indexPath.row;
  
    // 4. 跳轉介面
    [self.navigationController pushViewController:demoVc animated:YES];
    }

3> 演示控制器根據索引去載入不同的view

• 做一個基本的view只用來設定背景及方塊圖片及模擬者，其他的view在此基礎上新增功能，新建類 WPFBaseView

// 重寫其initWithFrame 方法，設定基本資訊
- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {
        // 以平鋪的方式設定背景圖片
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BackgroundTile"]];

        // 設定方塊
        UIImageView *boxView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Box1"]];
        boxView.center = CGPointMake(200, 220);
        [self addSubview:boxView];
        self.boxView = boxView;

        // 初始化模擬者
        UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self];

        self.animator = animator;
    }
    return self;
}

• WPFDemoController：根據傳入的索引去判斷載入那個行為的view

// 在此之前要先在標頭檔案中定義列舉型別
- (void)viewDidLoad {
    [super viewDidLoad];

    // 新建一個空的baseView
    WPFBaseView *baseView = nil;

    // 根據不同的功能型別選擇不同的檢視
    // 運用了多型
    switch (self.function) {
        case kDemoFunctionSnap:
            baseView = [[WPFSnapView alloc] init];
            break;

        case kDemoFunctionPush:
            baseView = [[WPFPushView alloc] init];
            break;

        case kDemoFunctionAttachment:
            baseView = [[WPFAttachmentView alloc] init];
            break;

        case kDemoFunctionSpring:
            baseView = [[WPFSpringView alloc] init];
            break;

        case kDemoFunctionCollision:
            baseView = [[WPFCollisionView alloc] init];
            break;

        default:
            break;
    }

    baseView.frame = self.view.bounds;

    [self.view addSubview:baseView];

}

• 載入不同view的效果

06根據不同的行為去載入view.gif

吸附行為：WPFSnapView

• UISnapBehavior吸附行為
• 在點選螢幕的時候獲取觸控點
• 需要在建立吸附行為的時候指定要吸附的位置
• 建立好之後將吸附行為新增到模擬者上

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    // 0. 觸控之前要清零之前的吸附事件，否則動作越來越小
    [self.animator removeAllBehaviors];

    // 1. 獲取觸控物件
    UITouch *touch = [touches anyObject];

    // 2. 獲取觸控點
    CGPoint loc = [touch locationInView:self];

    // 3 新增吸附事件
    UISnapBehavior *snap = [[UISnapBehavior alloc] initWithItem:self.boxView snapToPoint:loc];

    // 改變震動幅度，0表示振幅最大，1振幅最小
    snap.damping = 0.5;

    // 4. 將吸附事件新增到模擬者行為中
    [self.animator addBehavior:snap];
}

• 吸附行為效果圖

07吸附行為.gif

推動行為：WPFPushView

• UIPushBehavior推動行為

• 介紹

  • 推行為可以為一個檢視施加一個作用力，該力可以是持續的，也可以是一次性的

  • 可以設定力的大小，方向和作用點等資訊

  • 屬性：

    • mode: 推動型別（一次性推動或是持續推送）
    • active: 是否啟用，如果是一次性推動，需要啟用
    • angle: 推動角度
    • 推動力量

• 例項化推行為

• 通過拖拽手勢獲取起始點及其他狀態的點

• 設定全域性變數

@interface WPFPushView ()
{
    UIImageView *_smallView;    // 顯示在第一個觸控點位置的圖片框
    UIPushBehavior *_push;      // 推動的行為
    CGPoint _firstPoint;        // 手指點選的第一個點
    CGPoint _currentPoint;      // 當前觸控點
}
@end

• 推行為的建立

// 重寫init 方法
- (instancetype)init {

    if (self = [super init]) {

        // 1. 新增藍色view
        UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(150, 300, 20, 20)];
        blueView.backgroundColor = [UIColor blueColor];
        [self addSubview:blueView];



        // 2. 新增圖片框，拖拽起點
        UIImageView *smallView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AttachmentPoint_Mask"]];
        // 該圖片框預設是隱藏的，在觸控式螢幕幕的時候再顯示出來
        smallView.hidden = YES;
        [self addSubview:smallView];
        // 建立全域性關係
        _smallView = smallView;

        // 3. 新增推動行為
        UIPushBehavior *push = [[UIPushBehavior alloc] initWithItems:@[self.boxView] mode:UIPushBehaviorModeInstantaneous];
        [self.animator addBehavior:push];
        _push = push;


        // 4. 增加碰撞檢測
        UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[blueView, self.boxView]];
        collision.translatesReferenceBoundsIntoBoundary = YES;
        [self.animator addBehavior:collision];

        // 5. 新增拖拽手勢
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
        [self addGestureRecognizer:pan];

    }

    return self;
}

• 通過拖拽手勢根據不同狀態去確定力的方向和大小

    // 監聽開始拖拽的方法
- (void)panAction:(UIPanGestureRecognizer *)pan {

    // 如果是剛開始拖拽，則設定起點處的小圓球
    if (pan.state == UIGestureRecognizerStateBegan) {

        _firstPoint = [pan locationInView:self];
        _smallView.center = _firstPoint;
        _smallView.hidden = NO;


    // 如果當前拖拽行為正在移動
    } else if (pan.state == UIGestureRecognizerStateChanged) {

        _currentPoint = [pan locationInView:self];

        // 重繪當前頁面
        [self setNeedsDisplay];

    // 如果當前拖拽行為結束
    } else if (pan.state == UIGestureRecognizerStateEnded){

        // 1. 計算偏移量
        CGPoint offset = CGPointMake(_currentPoint.x - _firstPoint.x, _currentPoint.y - _firstPoint.y);

        // 2. 計算角度
        CGFloat angle = atan(offset.y / offset.x);

        if (_currentPoint.x > _firstPoint.x) {
            angle = angle - M_PI;
        }
        _push.angle = angle;

        // 3. 計算距離
        CGFloat distance = hypot(offset.y, offset.x);

        // 4. 設定推動的力度，與線的長度成正比
        _push.magnitude = directtion / 10;


        // 5. 使單次推行為有效
        _push.active = YES;

        // 6. 將拖拽的線隱藏
        _firstPoint = CGPointZero;
        _currentPoint = CGPointZero;

        // 7. 將起點的小圓隱藏
        _smallView.hidden = YES;

        // 8. 進行重繪
        [self setNeedsDisplay];
    }
}

• 設定劃線操作

- (void)drawRect:(CGRect)rect {

    // 1. 開啟上下文物件
    CGContextRef ref = UIGraphicsGetCurrentContext();

    // 2. 獲取路徑物件
    UIBezierPath *path = [UIBezierPath bezierPath];

    // 3. 劃線
    [path moveToPoint:_firstPoint];
    [path addLineToPoint:_currentPoint];
    CGContextAddPath(ref, path.CGPath);

    // 4. 設定線寬
    path.lineWidth = 7;

    // 5. 線的顏色
    [[UIColor greenColor] setStroke];

    // 6. 渲染
    [path stroke];

}

• 推行為效果圖

08推行為.gif

剛性附著行為：WPFAttachmentView

• 簡介：

  • 附著行為是描述一個檢視與一個錨點或者另一個檢視相連線的情況
  • 附著行為描述的是兩點之間的連線情況，可以模擬剛性或者彈性連線
  • 在多個物理鍵設定多個UIAttachment，可以模擬多物體連線。

• 屬性

  • attachedBehaviorType: 連線型別（連線到錨點或檢視）
  • items: 連線到檢視陣列
  • anchorPoint: 連線錨點
  • length: 距離連線錨點的距離

注意： 只要設定了以下兩個屬性，即為彈性連線

• damping: 振幅大小

• frequency: 震動頻率

• 設定全域性變數

@interface WPFPushView ()
{
    // 附著點圖片框
    UIImageView *_anchorImgView;

    // 參考點圖片框（boxView 內部）
    UIImageView *_offsetImgView;
}
@end

• 建立附著行為

- (instancetype)init {
    if (self = [super init]) {

        // 1. 設定boxView 的中心點
        self.boxView.center = CGPointMake(200, 200);

        // 2. 新增附著點
        CGPoint anchorPoint = CGPointMake(200, 100);
        UIOffset offset = UIOffsetMake(20, 20);

        // 3. 新增附著行為
        UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:self.boxView offsetFromCenter:offset attachedToAnchor:anchorPoint];

        [self.animator addBehavior:attachment];
        self.attachment = attachment;

        // 4. 設定附著點圖片(即直杆與被拖拽圖片的連線點)
        UIImage *image = [UIImage imageNamed:@"AttachmentPoint_Mask"];
        UIImageView *anchorImgView = [[UIImageView alloc] initWithImage:image];
        anchorImgView.center = anchorPoint;

        [self addSubview:anchorImgView];
        _anchorImgView = anchorImgView;

        // 3. 設定參考點
        _offsetImgView = [[UIImageView alloc] initWithImage:image];

        CGFloat x = self.boxView.bounds.size.width * 0.5 + offset.horizontal;
        CGFloat y = self.boxView.bounds.size.height * 0.5 + offset.vertical;
        _offsetImgView.center = CGPointMake(x, y);
        [self.boxView addSubview:_offsetImgView];

        // 4. 增加拖拽手勢
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
        [self addGestureRecognizer:pan];
    }
    return self;
}

• 新增拖拽手勢，在拖拽手勢移動的時候根據附著點及其軸點去繪製線段
  • 通過兩個屬性儲存附著點，及軸點

// 拖拽的時候會呼叫的方法
- (void)panAction:(UIPanGestureRecognizer *)pan {

    // 1. 獲取觸控點
    CGPoint loc = [pan locationInView:self];

    // 2. 修改附著行為的附著點
    _anchorImgView.center = loc;
    self.attachment.anchorPoint = loc;

    // 3. 進行重繪
    [self setNeedsDisplay];

}

• 在繪製的時候需要注意將圖片框的軸點進行座標轉換

- (void)drawRect:(CGRect)rect {
    // 1.獲取圖形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 2.設定路徑起點
    CGContextMoveToPoint(context, _anchorImage.center.x, _anchorImage.center.y);

    // 2.2設定路徑畫線的點，注意需要將軸點的座標進行轉換
    // 使得兩個點的座標位於同一個座標系下
    // addline
    // 去偏移點相對於父檢視的座標
    CGPoint p = [self convertPoint:_offsetImage.center     fromView:self.box];
    CGContextAddLineToPoint(context, p.x, p.y);

    // 2.3設定虛線樣式
    CGFloat lengths[] = {10.0f, 8.0f};
    CGContextSetLineDash(context, 0.0, lengths, 2);

    // 2.4設定線寬
    CGContextSetLineWidth(context, 5.0f);

    // 3.渲染，繪製路徑
    CGContextDrawPath(context, kCGPathStroke);
}

• 剛性附著行為效果圖
  • 中心點沒有偏移

09剛性附著行為.gif

* 中心點偏移</br>

09剛性附著行為2.gif

彈性附著行為：WPFSpringView

• 彈性附著行為與剛性附著行為類似，只需要設定兩個屬性就好了。

  // 振幅
  self.attachment.damping = 0.1f;
  // 頻率
  self.attachment.frequency = 1.0f;

• 彈性附著行為的view只需要繼承剛性附著行為就可以了。

  // WPFAttachView是剛性附著行為的view，WPFSpringView為彈性附著行為的view
  @interface WPFSpringView : WPFAttachView

• 但是需要在後面需要修改彈性附著行為的效果，所以要將剛性附著行為內部的附著行為暴露在.h檔案中

@property (nonatomic, weak) UIAttachmentBehavior *attachment;

• 1.只設置了振幅和頻率的效果

  // 振幅
  self.attachment.damping = 0.1f;
  // 頻率
  self.attachment.frequency = 1.0f;

10彈性附著行為.gif

• 2.通過KVO監聽方塊的中心點的變化，實時去更新繪圖後的效果

  // KVO監聽boxcenter的改變
  [self.box addObserver:self forKeyPath:@"center" options:NSKeyValueObservingOptionNew context:nil];

    - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
  
        [self setNeedsDisplay];
  
    }

10彈性附著行為2.gif

• 3.增加了重力後的效果

  // 新增重力
  UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[self.box]];
  [self.animator addBehavior:gravity];

10彈性附著行為3.gif

相關推薦