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]; -
重力仿真效果图</br>
01重力效果无边界检测.gif -
第二种情况——增加边缘检测
- 默认情况下没有任何阻挡控件直接掉出屏幕，可以通过添加边缘检测行为防止掉出。
// 3. 碰撞检测 UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[view, redView]]; // 设置不要出边界，碰到边界会被反弹 collision.translatesReferenceBoundsIntoBoundary = YES; // 4. 开始仿真 [animator addBehavior:collision]; 增加边缘检测效果图</br>
02重力有边界.gif
- 第三种情况——旋转
- 让控件旋转45°后，控件并不会倒下，因为控件的重心就在45°的那条线上。
- 如果修改为别的角度就会倒下
view.transform = CGAffineTransformMakeRotation(M_PI_4); - 旋转效果图</br>
03旋转.gif
- 第四种情况——碰撞
- 再增加一个红色的控件的时候就会发生碰撞的效果。
- 碰撞效果图</br>
项目框架搭建
一、结构分析
-
为了演示其他的几种行为效果，案例中需要用到
- 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;
}
```
- 列表控制器效果图</br>
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的效果</br>
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];
}
- 吸附行为效果图</br>
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];
}
- 推行为效果图</br>
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);
}
- 刚性附着行为效果图</br>
- 中心点没有偏移</br>
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.只设置了振幅和频率的效果</br>
// 振幅
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.增加了重力后的效果</br>
// 添加重力
UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[self.box]];
[self.animator addBehavior:gravity];
10弹性附着行为3.gif
10弹性附着行为4.gif
- 4.添加了碰撞检测后的效果
// 添加碰撞检测
UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[self.box]];
collision.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collision];
10弹性附着行为5.gif
碰撞检测
- 在碰撞界面添加一个红色的view
- 1.红色的view也添加到碰撞检测行为中</br>
// 增加一个红色的条状view
UIView *redV = [[UIView alloc] initWithFrame:CGRectMake(0, 400, 180, 30)];
redV.backgroundColor = [UIColor redColor];
[self addSubview:redV];
11边缘碰撞行为.gif
- 2.红色view不添加到任何行为中</br>
11边缘碰撞行为2.gif
- 3.如果只想在碰到红色view的时候方块掉下去，红色view不动，需要给碰撞检测增减一条碰撞边界
#pragma mark - 在红色view的上方添加一个边界到边界检测行为中
// 添加一个边界,起点，终点作为一条直线。
CGPoint fromP = CGPointMake(0, 400);
CGPoint toP = CGPointMake(180, 400);
[collision addBoundaryWithIdentifier:@"line" fromPoint:fromP toPoint:toP];
11边缘碰撞行为3.gif
- 4.也可以增加一个路径
注意：在增加路径的时候碰撞会碰在弧线两个顶点的连线的位置上，可以通过填充的模式看的更清楚一些。
// 添加路径
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 300) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
[collision addBoundaryWithIdentifier:@"bcd" forPath:path];
11边缘碰撞行为5.gif
- 5.补充
- 各种碰撞行为都有一个action的block，可以通过这个block监听在碰撞行为过程中的动态信息。
collision.action = ^(){
NSLog(@"%@", NSStringFromCGRect(self.box.frame));
};
* 可以设置边缘检测的代理，根据identifer标记去区分碰撞到哪一个边界了。objc
// 设置代理
collision.collisionDelegate = self;
#pragma mark - UICollisionBehaviorDelegate
- (void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(nullable id <NSCopying>)identifier atPoint:(CGPoint)p {
NSLog(@"%@", identifier);
}
```
多视图附加行为
- 1> 创建视图
- 2> 添加视图之间的附着行为
- 3> 添加重力行为
- 4> 添加边缘检测行为
- 5> 添加拖拽手势，单独处理头部视图的附着行为。
- 在开始拖拽式，实例化拖拽行为。设置附着点为触摸点
- 在拖动过程中，实时修改附着点为触摸点
- 在拖动结束后，移除附着行为，否则不能正常使用。
- 效果图</br>
- 重力在下</br>
12多视图附加行为.gif
* 重力在上</br>
12多视图附加行为2.gif
-
重力的方向可以通过
@property (readwrite, nonatomic) CGVector gravityDirection;去设置- 根据x,y值的几何方向去确定重力的方向。
-
界面效果：
- 有9个圆形的球，一个比较大的作为头部。
- 在从屏幕任意位置拖动的时候所有的圆球都成一条串的效果，沿着重力方向下垂。
- 抬起手指后，自由坠落。
-
1.创建9个view，并设置圆角半径作为圆形，将最后一个修改为更大的效果。
// 添加9个子控件 CGFloat startX = 20; CGFloat startY = 100; CGFloat r = 10; NSMutableArray *arrM = [NSMutableArray arrayWithCapacity:9]; for (int i = 0; i < 9; i++) { CGFloat x = startX + 2 * r * i; CGFloat y = startY; CGFloat width = 2 * r; CGFloat heigth = width; UIView *v = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, heigth)]; v.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0]; v.layer.cornerRadius = r; if (i == 8) { r = 20; v.backgroundColor = [UIColor greenColor]; v.frame = CGRectMake(v.frame.origin.x, v.frame.origin.y - 10, 2 * r, 2 * r); v.layer.cornerRadius = r; } [self.view addSubview:v]; // 保存到集合中 [arrM addObject:v]; } 9个圆球效果图</br>
13圆球.png
- 遍历集合中所有的元素并添加附加行为
- 最后一个要留着，单独处理
// 添加吸附吸附行为 for (int i = 0; i < 8; i++) { UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:arrM[i] attachedToItem:arrM[i+1]]; [_animator addBehavior:attachment]; } - 给所有的元素添加重力行为
// 重力仿真
UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:arrM];
// 指定重力的方向
gravity.gravityDirection = CGVectorMake(0.0, 1.0);
[_animator addBehavior:gravity];
- 添加边缘检测行为
// 边缘检测
UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:arrM];
collision.translatesReferenceBoundsIntoBoundary = YES;
[_animator addBehavior:collision];
- 添加拖拽手势，在拖拽手势内部根据状态进行处理
- 在开始拖拽的时候，给头部的view实例化附着行为，附着点就是触摸点。
- 在拖拽过程中，附加行为的附着点仍是触摸点。
- 在拖拽结束后，将附着行为从仿真者中移除。
CGPoint loc = [pan locationInView:self.view];
if (UIGestureRecognizerStateBegan == pan.state) {
// 开始拖拽,实例化附加行为
_attachment = [[UIAttachmentBehavior alloc] initWithItem:_headView attachedToAnchor:loc];
[_animator addBehavior:_attachment];
} else if (UIGestureRecognizerStateChanged == pan.state) {
// 拖拽过程中
_attachment.anchorPoint = loc;
} else if (UIGestureRecognizerStateEnded == pan.state){
// 结束拖拽
[_animator removeBehavior:_attachment];
}
