动画| 类似Windows的气泡屏保效果

本文详解一款类似Windows的气泡碰撞效果的屏保动画。

效果

实现步骤解析

• 1、在一个for循环中随机创建3个圆的中心点，需要保证的是 这三个中心点不能彼此有重叠部分，而且必须在屏幕内部。

        //不重叠
        BOOL containsPoint = NO;
        for (int j = 0; j < ballArray.count; j++) {
            
            UIButton *btnn = ballArray[j];
            
            if (CGRectIntersectsRect(btnn.frame,CGRectMake(cx  , cy  , BALL_WIDTH, BALL_WIDTH))) {
                containsPoint = YES;
            }
        }
        
        //在屏幕范围内
        if (cx > BALL_WIDTH && cy > BALL_WIDTH  && cx < SCREEN_WIDTH_NEW - BALL_WIDTH  && cy < SCREEN_WIDTH_NEW - BALL_WIDTH && containsPoint == NO) {
            
            qualified = YES;
        }else{
            continue;
        }
  

• 2、创建视图并把视图的中心点设置为满足条件而创建的此点。把这些视图保存在Aarray中

• 3、并随机给小球创建一个方向（一个很小的 CGPointMake量值），并用Barray保存这些方向addObject:[NSValue valueWithCGPoint:CGPointMake(randomX, randomY)

   //随机生成3个移动方向
    double randomX = (double)arc4random() / ARC4RAND_MAX * 2.0f - 1.0f;
    double randomY = (double)arc4random() / ARC4RAND_MAX * 2.0f - 1.0f;
    NSLog(@"%f %f",randomX,randomY);
    
    [ballDirectionArray addObject:[NSValue valueWithCGPoint:CGPointMake(randomX, randomY)]];
  

• 4、开启一个定时器，设置的时间间隔足够小 （本文例子中设置的为：0.004），并绑定相应的事件。

• 5、在定时器的事件中遍历Aarray中视图，并取出此视图的方向，如果视图碰到屏幕四边需要把对应的 x／y上的方向换成相反方向（-x／-y）。把视图的中心点在方向的左右下移动。并更新保存视图的最新方向。

    for (int j = 0; j < ballArray.count; j++) {
        UIButton *btn = ballArray[j];
        NSValue *val = [ballDirectionArray objectAtIndex:j];
        CGPoint p = [val CGPointValue];
        
        //移动方向
        __block  float vx = p.x;
        __block float vy = p.y;
        
        //掉头
        if (btn.right > SCREEN_WIDTH_NEW  || btn.left < 0) {
            vx = -vx;
            CGPoint p = [val CGPointValue];
            p.x = vx;
            [ballDirectionArray setObject:[NSValue valueWithCGPoint:p] atIndexedSubscript:j];
        }
        if (btn.bottom > SCREEN_HEIGHT_NEW || btn.top <0) {
            vy = -vy;
            CGPoint p = [val CGPointValue];
            p.y = vy;
            [ballDirectionArray setObject:[NSValue valueWithCGPoint:p] atIndexedSubscript:j];
        }
        
        //设置移动方向
        btn.centerX += vx;
        btn.centerY += vy;
  

• 6、在定时器的事件中也要处理两球碰撞时的方向变化，并更新保存碰撞两球的的最新方向。

     //两球中心点之间的距离
      float distance = sqrt(pow((btn.centerX - otherbtn.centerX), 2) + pow((btn.centerY - otherbtn.centerY), 2));
      if(distance <= BALL_WIDTH){  //发生了碰撞
  
      }
  

备注

有时候我们在打印一些CG类型的变量是，无法打印，利用UIKIT中的API可以很方便的实现 字符串和CG变量之间的转换。

利用NSValue也可以封装很多CG变量，并保存到数组中。