原型从网上找的,动效使用了CAAnimation和UIDynamic物理引擎。  gitHub  :https://github.com/BearRan/FlowMenuAnimation

大致步骤如下:

代码绘制凹槽动画


2.滚珠动画该分解成几个步骤

3.如何分解滚珠的物理效果

UIDynamic有以下物理效果


UIGravityBehavior:重力行为

 
#pragma mark  重力行为
- (UIGravityBehavior *)addGravityBehavior:(id <UIDynamicItem>)item
{
   UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] init];
   [gravityBehavior addItem:item];
   [_animator addBehavior:gravityBehavior];    return gravityBehavior;
}

UICollisionBehavior:碰撞行为

适用于:UIView和父类view的边界碰撞,以及和其他UIView碰撞
这里可以配合重力行为来设定小球的运动路径

  
#pragma mark  碰撞行为
- (UICollisionBehavior *)addCollisionBehavior:(id <UIDynamicItem>)item
{
   UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] init];
   [collisionBehavior addItem:item];
   [collisionBehavior addBoundaryWithIdentifier:@"path" forPath:_beizerPath];
   [_animator addBehavior:collisionBehavior];
   return collisionBehavior;
}

UISnapBehavior:捕捉行为

顾名思义,不解释

UIPushBehavior:推动行为
使用瞬间或持续的力并按照某一方向作用于某个UIView
用于开始或结束时的小球推动

 

#pragma mark  显现动画,第一个球向右的推力
- (UIPushBehavior *)addPushBehavior_inFirstBtn
{
   UIButton *tempBtn = _btnArray[0];
   UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[tempBtn] mode:UIPushBehaviorModeInstantaneous];
   pushBehavior.pushDirection = CGVectorMake(1, 0.3);
   pushBehavior.magnitude = 1.6;
   [_animator addBehavior:pushBehavior];    return pushBehavior;
}
 

UIAttachmentBehavior:附着行为

UIView和某个UIView的相互吸附行为
此处用于小球见的相互吸附作用

 
#pragma mark  添加球与球之间的附着行为
- (UIAttachmentBehavior *)addAttachmentBehavior_item:(id <UIDynamicItem>)item attachToItem:(id <UIDynamicItem>)attachToItem
{
   SpecialBtn *tempBtn = (SpecialBtn *)item;
   UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:item attachedToItem:attachToItem];
   [attachmentBehavior setLength:tempBtn.width + 20];
   [attachmentBehavior setDamping:10.01];
   [attachmentBehavior setFrequency:1];
   [_animator addBehavior:attachmentBehavior];    return attachmentBehavior;
}
 

UIDynamicItemBehavior:动力元素行为

一些其他的物理元素,比如摩擦力,线速度阻力,角速度阻力等

 
#pragma mark  动力元素行为
- (UIDynamicItemBehavior *)addDynamicItemBehavior:(id <UIDynamicItem>)item
{
   UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[item]];
   itemBehavior.resistance = 0;
   itemBehavior.allowsRotation = YES;
   itemBehavior.angularResistance = 4.0;
   itemBehavior.friction = 0.8;
   [_animator addBehavior:itemBehavior];    return itemBehavior;
}

阶段一:滚珠一起滚落下来时到最高点的阶段球与球之间的附着行为 + 重力行为+碰撞行为+ 动力元素行为+ 第一个球向右的推力#pragma mark 显现动画

 
#pragma mark 显现动画
- (void)showBtnsAnimation
{
   _animatorStatus = kAnimatorStatus_open;
   [_animator removeAllBehaviors];    if (showPath) {
       _pathLayer.path = _beizerPath.CGPath;
       _pathLayer.fillColor = [UIColor clearColor].CGColor;
       _pathLayer.strokeColor = [UIColor orangeColor].CGColor;
       _pathLayer.lineWidth = 2.0;
       [self.layer addSublayer:_pathLayer];
   }    CGFloat btn_gap = [self setXX:16];
   for (int i = 0; i < [_btnArray count]; i++) {        SpecialBtn *tempBtn = _btnArray[i];
       tempBtn.tag = i;
       [self addSubview:tempBtn];        //  设定初始位置
       [tempBtn setX:(tempBtn.width + btn_gap) * ([_btnArray count] - 1 - i) + btn_gap];
       [tempBtn setY:-tempBtn.height];        //  添加球与球之间的附着行为
       if (i > 0) {
           [self addAttachmentBehavior_item:_btnArray[i] attachToItem:_btnArray[i - 1]];
       }        //  重力行为
       UIGravityBehavior *gravityBehavior = [self addGravityBehavior:tempBtn];
       if (i == [_btnArray count] - 1) {
           //  最后一个球处理重力行为
           [self dealLastBtnGravityBehavior:gravityBehavior tempBtn:tempBtn];
       }        //  碰撞行为
       [self addCollisionBehavior:tempBtn];        //  动力元素行为
       UIDynamicItemBehavior *itemBehavior = [self addDynamicItemBehavior:tempBtn];
       if (i == [_btnArray count] - 1) {
           //  最后一个球增加密度,以防止出现的时候,由于惯性的原因导致飞起来
           itemBehavior.density = 1.8;
       }    }    //  第一个球向右的推力
   [self addPushBehavior_inFirstBtn];
}

阶段二:滚珠滚落到最高点后回流的的阶段球与球之间的附着行为 + 重力行为+碰撞行为+ 动力元素行为+ 最后一个球向左pushf

 
 
for (int i = 0; i < [_btnArray count]; i++) {
   //  添加球与球之间的附着行为
   if (i > 0) {
                   UIAttachmentBehavior *attachmentBehavior = [self addAttachmentBehavior_item:_btnArray[i] attachToItem:_btnArray[i - 1]];
        [attachmentBehavior setFrequency:5];
        [attachmentBehavior setLength:tempBtn.width + 5];
    }     //  重力行为
    [self addGravityBehavior:_btnArray[i]];
     //  碰撞行为
    [self addCollisionBehavior:_btnArray[i]];
     //  动力元素行为
    UIDynamicItemBehavior *itemBehavior = [self addDynamicItemBehavior:_btnArray[i]];
    itemBehavior.angularResistance = 15.0; } //  最后一个球向左push
UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[tempBtn] mode:UIPushBehaviorModeContinuous];
pushBehavior.pushDirection = CGVectorMake(-1, -0.5); pushBehavior.magnitude = 2.3; [_animator addBehavior:pushBehavior];
  

阶段三:滚珠消失阶段球与球之间的附着行为 + 重力行为+碰撞行为+ 动力元素行为+ 最后一个球向左push(和阶段二几本一致,只是推动的力大了一些)

 
 
#pragma mark 消退动画
- (void)closeBtnsAniamtion
{
   NSLog(@"-- closeBtnsAniamtion");
   _animatorStatus = kAnimatorStatus_close;
   SpecialBtn *lastBtn = (SpecialBtn *)[_btnArray lastObject];    [_animator removeAllBehaviors];    for (int i = 0; i < [_btnArray count]; i++) {        //  添加球与球之间的附着行为
       if (i > 0) {            UIAttachmentBehavior *attachmentBehavior = [self addAttachmentBehavior_item:_btnArray[i] attachToItem:_btnArray[i - 1]];
           [attachmentBehavior setFrequency:5];
           [attachmentBehavior setLength:lastBtn.width + 5];
       }        //  重力行为
       UIGravityBehavior *gravityBehavior = [self addGravityBehavior:_btnArray[i]];
       if (i == 0) {
           [self dealFirstDisappearBtnGravityBehavior:gravityBehavior tempBtn:_btnArray[i]];
       }        //  碰撞行为
       [self addCollisionBehavior:_btnArray[i]];        //  动力元素行为
       [self addDynamicItemBehavior:_btnArray[i]];
   }    //  最后一个球向左push
   UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[lastBtn] mode:UIPushBehaviorModeContinuous];
   pushBehavior.pushDirection = CGVectorMake(-1, -0.5);
   pushBehavior.magnitude = 10.0;
   [_animator addBehavior:pushBehavior];
}
 
  

demo地址:

作者:熊熊xr

原文地址:http://code4app.com/forum.php?mod=viewthread&tid=9264&extra=page%3D62%26filter%3Dsortid%26orderby%3Ddateline%26sortid%3D1

04-24 03:08