我们是使用新版qq的过程中，当我们给对方发送“生日快乐”，“天冷了”等词汇时，会出现特效图片从手机屏幕上方一直往下跳动，如下图所示，当输入生日快乐时，会有蛋糕的图片从上往下蹦跳，直到最后跳出屏幕底部，这样的设计增加了聊天时的趣味性，同时在想这个动画的实现原理，这让我想到了在平时工作中不太常用，但功能很强大的UIDynamic（物理仿真），自己做了一个很简单的小demo，模拟了qq聊天特效图片的动画。

demo基本效果如下:

在开始代码实现之前，先给大家再介绍一下UIDynamic。

UIDynamic是从iOS7开始引入的技术，属于UIkit框架，主要包括3个类：

UIDynamicAnimator Class: 通过这个类，实例化仿真器，管理仿真行为，在创建仿真器时，需要制定参照视图（Reference view），本案例中就是self.view.

UIDynamicItem Protocol：执行仿真行为的仿真元素的协议，UIView默认遵守该协议；

其中，UIDynamicBehavior又可以分为以下几种行为：

    •    UIAttachmentBehavior          吸附行为
    •    UICollisionBehavior               碰撞行为
    •    UIDynamicItemBehavior       动力元素行为
    •    UIGravityBehavior                重力行为
    •    UIPushBehavior                   推动行为
    •    UISnapBehavior                   捕捉行为

其中UIDynamicItemBehavior这个类比较特殊，使用来给仿真元素设置相关的动力学参数，通过这些参数，实现模拟真实世界中物体的运动轨迹和形态，主要属性如下：

@property (nonatomic, readonly, copy) NSArray* items;
@property (readwrite, nonatomic) CGFloat elasticity; // Usually between 0 (inelastic) and 1 (collide elastically) 弹性系数 在0~1之间
@property (readwrite, nonatomic) CGFloat friction; // 0 being no friction between objects slide along each other 摩擦力系数
@property (readwrite, nonatomic) CGFloat density; // 1 by default 跟size大小相关，计算物体块的质量。
@property (readwrite, nonatomic) CGFloat resistance; // 0: no velocity damping 阻力系数
@property (readwrite, nonatomic) CGFloat angularResistance; // 0: no angular velocity damping 旋转阻力
@property (readwrite, nonatomic) BOOL allowsRotation; // force an item to never rotate  是否能旋转

要现实仿真动画，首先需要创建仿真器，添加仿真行为，再通过创建仿真元素来响应和执行仿真行为，其关系如下图所示：

、

通过上图我们可以发现，同一个仿真元素可以响应和执行多个仿真行为，这样就可以实现更为丰富的动画效果，但是也可能造成不同行为之间的效果冲突，我做的这个小demo中主要用到重力行为和碰撞行为，另外使用了碰撞行为的代理协议（UICollisionBehaviorDelegate

），实现代码如下：

part1:创建仿真器、仿真行为，设置碰撞行为的边界，需要设置一个定时器，让仿真元素持续从屏幕上方下坠。

- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.//创建仿真器UIDynamicAnimator *animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];//仿真行为，重力行为 items是执行重力仿真行为的元素组成的集合UIGravityBehavior *gravity = [[UIGravityBehavior alloc]init];//将行为添加给仿真器[animator addBehavior:gravity];//设置重力加速度gravity.magnitude = 3;self.gravity = gravity;//创建碰撞行为UICollisionBehavior *collision = [[UICollisionBehavior alloc]init];//创建动力元素行为UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc]init];//设置弹性系数itemBehavior.elasticity = 0.6;//设置摩擦力itemBehavior.friction = 0.2;//设置阻力itemBehavior.resistance = 0;//添加动画行为[animator addBehavior:itemBehavior];self.itemBeha = itemBehavior;//设置属性让边缘检测行为生效，将坐标系的边界设置为边缘collision.translatesReferenceBoundsIntoBoundary = YES;self.collision = collision;//设置代理collision.collisionDelegate = self;//设置碰撞边界[self addNewView:CGRectMake(060, 580, 120, 25) andBundary:collision];[self addNewView:CGRectMake(100, 480, 100, 25) andBundary:collision];[self addNewView:CGRectMake(140, 240, 90, 25) andBundary:collision];[self addNewView:CGRectMake(030, 390, 100, 25) andBundary:collision];[self addNewView:CGRectMake(200, 340, 90, 25) andBundary:collision];[self addNewView:CGRectMake(280, 150, 100, 25) andBundary:collision];//给仿真器添加碰撞行为[animator addBehavior:collision];//赋值给一个全局变量，防止出了括号就没销毁self.animator = animator;//开启定时器[self setTimer];}

part1.1 添加边界的方法封装

-(void)addNewView:(CGRect)frame andBundary:(UICollisionBehavior*)collision{//设置边界的相关属性UIView *bundaryView = [[UIView alloc]init];bundaryView.frame = frame;bundaryView.layer.cornerRadius = 5;bundaryView.backgroundColor = CZRandomColor;//添加到当前视图中[self.view addSubview:bundaryView];//添加到碰撞行为中[collision addBoundaryWithIdentifier:[NSString stringWithFormat:@"xx%d",++k] fromPoint:CGPointMake(frame.origin.x , frame.origin.y) toPoint:CGPointMake(frame.origin.x+frame.size.width, frame.origin.y)];
}

part2:定时器设置

-(void)setTimer{self.timer = [NSTimer scheduledTimerWithTimeInterval:1.8 target:self selector:@selector(roll) userInfo:nil repeats:YES];}

 part3:在定时器的执行方法中设置仿真元素的相关属性，并将仿真元素添加到仿真行为中

-(void)roll{//设置一个随机数int i = arc4random_uniform(420);//添加viewUIView *colorball =[[UIView alloc]init];//设置圆角colorball.layer.cornerRadius = 10;colorball.backgroundColor = CZRandomColor;colorball.alpha = 0.8;//设置大小colorball.frame = CGRectMake(i, 10, 20, 20);[self.view addSubview:colorball];//将仿真元素添加到仿真行为中[self.collision addItem:colorball];[self.gravity addItem:colorball];[self.itemBeha addItem:colorball];//为了实现一段时间清除仿真元素，在此处设置一个计数num++;self.num =num;CZLog(@"%@",@(num));[self bundaryDispare];
}

 part4:在屏幕中的仿真元素积累到一定数量，设置屏幕底部边界失效，并在0.3秒后再次开启。

-(void)bundaryDispare{if (self.num==10) {//当屏幕中的小球到一定数量时，弹出提示框UILabel *tipLabel = [[UILabel alloc]init];tipLabel.backgroundColor = [UIColor blackColor];tipLabel.center = self.view.center;tipLabel.width = 200;tipLabel.height = 50;tipLabel.layer.cornerRadius = 20;//裁剪提示框tipLabel.layer.masksToBounds = YES;tipLabel.alpha = 0;tipLabel.textAlignment = NSTextAlignmentCenter;tipLabel.text = @"你的小球太多了～";tipLabel.textColor = [UIColor whiteColor];//添加到view中[self.view addSubview:tipLabel];//设置提示框的提示效果[UIView animateWithDuration:2 animations:^{tipLabel.alpha = 0.8;} completion:^(BOOL finished) {[UIView animateWithDuration:1 animations:^{tipLabel.alpha = 0;} completion:^(BOOL finished) {[tipLabel removeFromSuperview];}];}];//关闭定时器[self.timer setFireDate:[NSDate distantFuture]];//边界失效self.collision.translatesReferenceBoundsIntoBoundary = NO;//此时的小球数为0num = 0;//延迟打开边界dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{self.collision.translatesReferenceBoundsIntoBoundary = YES;//再次开启定时器[self.timer setFireDate:[NSDate distantPast]];});}}

 part5:调用UICollisionBehaviorDelegate方法实现仿真元素的弹动并下坠到下一个边界（即实现qq聊天图片特效）

//使用代理方法
-(void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id)item withBoundaryIdentifier:(id)identifier atPoint:(CGPoint)p{//1.5秒后移除identifier对应的边界dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[behavior removeBoundaryWithIdentifier:identifier];});
}-(void)collisionBehavior:(UICollisionBehavior *)behavior endedContactForItem:(id)item withBoundaryIdentifier:(id)identifier{//根据identifier获取边界路径UIBezierPath *path = [behavior boundaryWithIdentifier:identifier];//根据边界路径再次添加边界dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[behavior addBoundaryWithIdentifier:identifier forPath:path];});}

 可能还有一些我未发现的bug存在，欢迎大家交流讨论。

转载于:https://www.cnblogs.com/thsk/p/5278018.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！