5.10 UI Dynamic 毛毛虫练习

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];
    }
}