iOS动画 CABaseAnimation总结

最近有些无聊，无意之中又发现了一个好玩的东西，就是添加到购物车的动画~ 额，好高大上啊，相比我之前用的动画，感觉就是山寨与正品的差距啊 T T

这是我之前习惯用的 T T

原谅我之前年少无知 - -

    [UIView animateWithDuration:耗时 animations:^{
        // 动画
    } completion:^(BOOL finished) {
        // 动画完成后要做的事
    }];

1.CABasicAnimation

简单介绍下基本概念

1. CALayer

   CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。一般来说，layer可以有两种用途：一是对view相关属性的设置，包括圆角、阴影、边框等参数；二是实现对view的动画操控。 因此对一个view进行动画，本质上是对该view的.layer进行动画操纵。

2. CAAnimation

   CAAnimation可以分为以下几类：

   CABasicAnimation基础动画，通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

   CAKeyframeAnimation关键帧动画，可定制度比CABasicAnimation高，也是本系列的接下来的内容

   使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。

3. CAAnimationGroup

   CAAnimationGroup组动画，支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行

   实例化

属性	说明
Autoreverses	动画结束时是否执行逆动画，通俗的说就是回放- -
Duration	动画执行的时间
RemovedOnCompletion	动画执行完毕后，图层会保持显示动画执行后的状态，图层动画属性被移除，图层的属性值还是动画执行前的初始值，并没有真正被改变。
FillMode	这个属性一般和 RemovedOnCompletion 配合使用，保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed	动画执行速度
RepeatCount	动画重复次数
RepeatDuration	动画重复执行的时间段
FromValue	动画执行的初始值
ToValue	动画执行的效果值
ByValue	所改变属性相同起始值的改变量
TimingFunction	控制动画的显示节奏系统提供五种值选择，分别是： 1.kCAMediaTimingFunctionLinear 线性动画 2.kCAMediaTimingFunctionEaseIn 先慢后快 3.kCAMediaTimingFunctionEaseOut 先快后慢 4.kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢 5.kCAMediaTimingFunctionDefault 默认，也属于中间比较快
BeginTime	可以用来设置动画延迟执行时间，若想延迟1s，就设置为CACurrentMediaTime()+1，CACurrentMediaTime()为图层的当前时间

解释：为什么动画结束后返回原状态？首先我们需要搞明白一点的是，layer动画运行的过程是怎样的？其实在我们给一个视图添加layer动画时，真正移动并不是我们的视图本身，而是 presentation layer 的一个缓存。动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。这就解释了为什么我们的视图在动画结束后又回到了原来的状态，因为它根本就没动过。

简单小栗子

// 这的key是设置不同效果的动画，下面有整理
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 平移动画
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2 - 75)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2 - 75)];
animation.duration = 3.0f;
// 这的key可以区分不同不同的动画，在动画完成回调时可已经判断等操作
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

小栗子

动画开始和结束时的事件为了获取动画的开始和结束事件，需要实现协议

animation.delegate = self;
//动画开始时
- (void)animationDidStart:(CAAnimation *)anim
{ 
    if ([anim isEqual:[self.imageView.layer animationForKey:@"positionAnimation"]]) 
    { 
        NSLog(@"平移动画执行了");
    }
}
//动画结束时
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //方法中的flag参数表明了动画是自然结束还是被打断,比如调用了removeAnimationForKey:方法或removeAnimationForKey方法，flag为NO，如果是正常结束，flag为YES。
    NSLog(@"结束了");
}

下面是一些常用的animationWithKeyPath值的总结

属性	说明	使用
transform.scale	比例转换	@(0.8)
transform.scale.x	宽的比例	@(0.8)
transform.scale.y	高的比例	@(0.8)
transform.rotation.x	围绕x轴旋转	@(M_PI)
transform.rotation.y	围绕y轴旋转	@(M_PI)
transform.rotation.z	围绕z轴旋转	@(M_PI)
cornerRadius	圆角的设置	@(50)
backgroundColor	背景颜色的变化	(id)[UIColor purpleColor].CGColor
bounds	大小，中心不变	[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position	位置(中心点的改变)	[NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents	内容，比如UIImageView的图片	imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity	透明度	@(0.7)
contentsRect.size.width	横向拉伸缩放	@(0.4)最好是0~1之间的

2.CAAnimationGroup

不多说，直接上栗子

    // 轨迹动画
    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 缩放动画
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 旋转动画
    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2-50)];
    // values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
    animation1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
    
    animation2.fromValue = [NSNumber numberWithFloat:0.8f];
    animation2.toValue = [NSNumber numberWithFloat:2.0f];
    
    animation3.toValue = [NSNumber numberWithFloat:M_PI*4];
    
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[animation1, animation2, animation3];
    animationGroup.duration = 4.0f;
    
    [_imageView.layer addAnimation:animationGroup forKey:@"groupAnimation"];

动画组小栗子

动画组便是把一系列的动画组成一个数组，然后执行

3.UIBezierPath

使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径，都用直线和曲线去创建。我们使用直线段去创建矩形和多边形，使用曲线去创建圆弧（arc）、圆或者其他复杂的曲线形状。

    // 轨迹动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 圆形轨迹动画
    // path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(WIDTH/2-100, HEIGHT/2-100, 200, 200)];
    animation.path = path.CGPath;
    animation.duration = 2.0f;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    // 先慢后快
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [_imageView.layer addAnimation:animation forKey:@"position"];

贝塞尔曲线动画

4.CATransition

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

1. 创建转场动画
2. 设置转场类型、子类型以及其他属性
3. 设置转场后的新视图并添加动画到图层

动画类型	说明	对应常量	是否支持方向设置
公开API
fade	淡出效果	kCATransitionFade	是
movein	新视图移动到旧视图上	kCATransitionMoveIn	是
push	新视图推出旧视图	kCATransitionPush	是
reveal	移开旧视图显示新视图	kCATransitionReveal	是
私有API
cube	立方体翻转效果	无	是
oglFlip	翻转效果	无	是
suckEffect	收缩效果	无	否
rippleEffect	水滴波纹效果	无	否
pageCurl	向上翻页效果	无	是
pageUnCurl	向下翻页效果	无	是
cameralIrisHollowOpen	摄像头打开效果	无	否
cameraIrisHollowClose	摄像头关闭效果	无	否

动画子类型	说明
kCATransitionFromRight	从右侧转场
kCATransitionFromLeft	从左侧转场
kCATransitionFromTop	从顶部转场
kCATransitionFromBottom	从底部转场

最后

这里只是简单的说明了下一些简单的概念，复杂的酷炫动画需要各种组合，还需要你的想象力。没事可以多多练习一下，将一个个简单的动画添加上~

参考资料：

iOS动画详解（学习动画看这一篇就够了）

iOS那些简单的动画（不定期更新）

iOS动画（Core Animation）总结

CABasicAnimation使用总结