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