IOS开发-UIDynamic(物理仿真)模拟QQ聊天界面的特效图片动画

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

demo基本效果如下:

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

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

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

<2>UIDynamicBehavior Class：仿真动画的仿真行为；

<3>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);
    
    
    //添加view
    UIView *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;
        
        //此时的小球数为0
        num = 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<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)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<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)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存在，欢迎大家交流讨论。

IOS开发-UIDynamic(物理仿真)模拟QQ聊天界面的特效图片动画

推荐阅读