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我发现这三个按钮从加号按钮里面出来发生以下事情:
- 从小到大
- 透明度不断增大
- 移动到指定位置且有弹性效果
- 按钮有旋转
咋一看这么多效果怎么弄，其实别想这么复杂，一个动画一个动画的来,然后在用一个CAAnimationGroup不就完了吗？
-
从小到大
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]];
现在就可以实现按钮从加号按钮的位置坐着动画开始了
其实实现起来也是不难的
动画结束按钮消失
我们也可以分析一下动画的过程
- 移动到加号按钮的位置
- 透明度不断减小
- 大小逐渐变为加号按钮的大小
- 有旋转
三个按钮回去的代码我就不写出来了其实和上面差不多
代码已经放到这里有兴趣的可以下载来看
如果感觉这篇文章对您有所帮助，顺手点个喜欢，谢谢啦
