animationOne.gif

今天我们要做一仿咸鱼的动画
动画的技术只用到Core Animation的知识所有我相信大家一定能很轻松的看懂。

动画开始前

首先在加号按钮一点击我们先创建三个按钮

//创建按钮
-(void)addButton
{
  NSUInteger buttonCount=3;

  for (NSUInteger i=0; i<buttonCount; i++) {
    
    
    pushButton *btn=[pushButton buttonWithType:UIButtonTypeCustom];
    
    //使按钮的frame和加号按钮的frame一样
    btn.frame=CGRectMake(0, 0, self.addBtn.frame.size.width, self.addBtn.frame.size.width);
    btn.center=self.addBtn.center;
    
    
    [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"post_animate_%lu",(unsigned long)(i+1)]] forState:UIControlStateNormal];

    //把按钮放到数组里，以便时候使用
    [self.btnArray addObject:btn];
    
    [self addSubview:btn];
         
  }
}

动画开始按钮出现

这时候我们要给按钮添加动画，在分析咸鱼app我发现这三个按钮从加号按钮里面出来发生以下事情:

1. 从小到大
2. 透明度不断增大
3. 移动到指定位置且有弹性效果
4. 按钮有旋转

咋一看这么多效果怎么弄，其实别想这么复杂，一个动画一个动画的来,然后在用一个CAAnimationGroup不就完了吗？

1. 从小到大
   CABasicAnimation *animationScale=[CABasicAnimation animation];

    animationScale.keyPath=@"transform.scale";          
    animationScale.toValue=@(1.3);
   

对了如果对keyPath的值有疑问的可以看这里

2.透明度不断增大

 CABasicAnimation *animationoPacity=[CABasicAnimation animation];
 animationoPacity.keyPath=@"opacity";
 animationoPacity.fromValue=@(0);
 animationoPacity.toValue=@(1);

3.有弹性效果
这个我重点介绍一下 CASpringAnimationiOS9才引入的动画类，它继承于CABaseAnimation，用于制作弹簧动画

它有几个属性

• mass:
  质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大

• stiffness:
  刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快

• damping:
  阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快

• initialVelocity:
  初始速率，动画视图的初始速度大小
  速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反

  CASpringAnimation *animationSpring=[CASpringAnimation animationWithKeyPath:@"position"];
    animationSpring.damping =8;
    animationSpring.stiffness = 120;
    animationSpring.mass = 0.6;
    animationSpring.initialVelocity = 0;
    animationSpring.toValue =[NSValue valueWithCGPoint:toValue.origin];
  

其实这个和一个方法很像

 [UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

如果属性这个方法的同学理解CASpringAnimation应该也不难

4.按钮有旋转

 CABasicAnimation *animationRotation=[CABasicAnimation animation];
 animationRotation.keyPath=@"transform.rotation.z";
//根据按钮的出现顺序旋转的角度也不同     
 animationRotation.fromValue=@(DEGREES_TO_RADIANS(90/(self.btnArray.count-i)));
 animationRotation.toValue=@(0);

最后就是来一个CAAnimationGroup把所有的动画加进去

 CAAnimationGroup *animationGroup=[CAAnimationGroup animation];
 animationGroup.animations=@[animationoPacity,animationScale,animationRotation,animationSpring];
 animationGroup.duration=0.5;         
 animationGroup.beginTime=CACurrentMediaTime()+i*(0.4/self.btnArray.count)； 

 //这两句是可以是动画停留在结束为止，但是这种方法不是正确的以后会讲到      
 animationGroup.removedOnCompletion=NO;   
 animationGroup.fillMode=kCAFillModeForwards;
 [menuButton.layer addAnimation:animationGroup forKey:[NSString stringWithFormat:@"animation%ld",(long)i]];

现在就可以实现按钮从加号按钮的位置坐着动画开始了
其实实现起来也是不难的

动画结束按钮消失

我们也可以分析一下动画的过程

1. 移动到加号按钮的位置
2. 透明度不断减小
3. 大小逐渐变为加号按钮的大小
4. 有旋转
   三个按钮回去的代码我就不写出来了其实和上面差不多
   代码已经放到这里有兴趣的可以下载来看
   如果感觉这篇文章对您有所帮助，顺手点个喜欢，谢谢啦