2.1毛毛蟲練習

重點掌握UIPanGestureRecognizer拖拽手勢和UIAttachmentBehavior附著行為,UIGravityBehavior重力行為,UICollisionBehavior碰撞行為綜合使用

(一)效果

14657205084468.gif

(二)思路分析

1>毛毛蟲由9各圓構成.
2>使用循環創建9個矩形使用view的layer屬性設置矩形的圓角成為一個圓.
3>在循環中判斷毛毛蟲的頭,設置fram比其圓大,顏色為藍顏色.
4>給毛毛蟲頭添加拖拽手勢.
5>在拖拽回調方法中給毛毛蟲頭添加附著行為,并且修改附著點為手指的坐標.
6>判斷如果手勢離開毛毛蟲頭移除附著行為.

創建毛毛蟲圓的核心代碼:

// 有9個圓,所以循環9次
for (int i = 0; i < 9; ++i) {
        UIView *momoView = [[UIView alloc] init];
        
        CGFloat w = 30; // 初始化寬度為30
        CGFloat h = 30; // 初始化高度為30
        CGFloat x = i * w; // 每一個view的x坐標為寬度*i
        CGFloat y = 100; // 初始化y坐標為100
        
        // 設置view的frame
        momoView.frame = CGRectMake(x, y, w, h);
        // 設置view的背景色
        momoView.backgroundColor = [UIColor redColor];
        // 使用view的layer屬性設置圓角大小
        momoView.layer.cornerRadius = 0.5 * w;
        // 設置需要切角
        momoView.layer.masksToBounds = YES;

            // 如果是第8個圓(毛毛蟲的頭,修改view的frame  CGRectMake(x, y - 15, w*2, h*2))
        if (i == 8) {
            momoView.frame = CGRectMake(x, y - 15, w*2, h*2);
            // 修改毛毛蟲頭的顏色為藍色
            momoView.backgroundColor = [UIColor blueColor];
            // 設置圓角角度
            momoView.layer.cornerRadius = w;
            // 為蟲頭添加拖拽手勢
            UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
            [momoView addGestureRecognizer:pan];

        }
        // 將創建的所有view添加到控制器view
        [self.view addSubview:momoView];
        // 將每一個view保存起來,為每一個view添加附著行為做準備.
        [self.bodys addObject:momoView];
    }

為毛毛蟲身體每一個圓添加不同的仿真行為核心代碼

// 為每一個圓添加附著行為
    for (int i = 0; i < self.bodys.count - 1; ++i) {
    // 創建附著行為(在兩個動力學元素之間添加附著行為)
        UIAttachmentBehavior *att = [[UIAttachmentBehavior alloc] initWithItem:self.bodys[i] attachedToItem:self.bodys[i+1]];
        [self.animator addBehavior:att];
    }
    
    // 為每一個圓添加重力行為
    UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:self.bodys];
    [self.animator addBehavior:gravity];
    
    // 為每一個圓添加碰撞行為
    UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:self.bodys];
    // 設置參考視圖為碰撞邊界
    collision.translatesReferenceBoundsIntoBoundary = YES;
    [self.animator addBehavior:collision];

蟲頭的拖拽手勢回調實現核心代碼

// 拖拽手勢回調方法
/*
思路:
為蟲頭的view添加一個附著行為,并且修改附著點為手指移動的坐標點
當手指離開時(拖拽狀態為UIGestureRecognizerStateEnded)移除
蟲頭view的附著行為

需要使用懶加載創建動畫者對象

注意!!!不能再拖拽回調方法中不停創建蟲頭view的附著行為,所以需要進行判斷
如果附著行為已經存在就不需要創建,如果不存在則重新創建一個附著行為.

*/
- (void)pan:(UIPanGestureRecognizer *)pan{
    // 獲取手指的位置
    CGPoint p = [pan locationInView:self.view];
    
    // 1.創建動畫者對象
    // 詳見懶加載
    
    // 2.創建附著行為(為毛毛蟲的頭部圓和手指之間添加附著行為)
    if (!self.att) {
        UIAttachmentBehavior *att = [[UIAttachmentBehavior alloc] initWithItem:pan.view attachedToAnchor:p];
        self.att = att;
    }
    
    // 修改附著點為手指的坐標
    self.att.anchorPoint = p;
    
    // 3.將附著行為添加到動畫者對象
    [self.animator addBehavior:self.att];
    
    // 判斷手勢的狀態,如果拖拽已經離開則移除毛毛蟲的附著行為
    if (pan.state == UIGestureRecognizerStateEnded) {
        // 移除附著行為
        [self.animator removeBehavior:self.att];
    }
}