iOS 动画之CoreAnimation(CALayer)

2016-04-23 本文已影响1242人 Joker_King

CoreAnimation基本介绍

CoreAnimation动画位于iOS框架的Media层
CoreAnimation动画实现需要添加QuartzCore.Framework
CoreAnimation基本上是Layer Animation

CoreAnimation分类

隐式动画：无需指定任何动画的类型，仅仅改变一个属性，然后CoreAnimation来决定
如何计时去做动画。
显示动画：对一些属性做指定的自定义动画，或创建非线性动画，比如沿着任意一条曲线移动。

CoreAnimation作用

与UIView动画相比，CoreAnimation能够实现更多复杂、好看、高效的动画效果。

阴影，圆角，带颜色的边框。
3D变化。
透明遮罩
多级非线性动画

CoreAnimation的三种动画

CABasicAnimation基本单一类型的动画，通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation 。
CAKeyframeAnimation帧动画主要操作属性有keyPath和values值组合Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动。
CAAnimationGroup组合动画操作属性animations将CAAnimation类型的动画加入数组，以FIFO队列的方式执行。
CATransition这个就是苹果帮开发者封装好的一些动画

CABasicAnimation

三个重要的属性

@property(nullable, strong) id fromValue;动画的效果变化的初始值
@property(nullable, strong) id toValue;动画效果变化的结束值（绝对值）
@property(nullable, strong) id byValue;动画效果变化的结束值（相对值）

这三个属性必须要有一个有值，它们的值就是原来视图的放大，旋转等倍数或者角度。

fromValue和toValue不为空，动画的效果会从fromValue的值变化到toValue。
fromValue和byValue都不为空，动画的效果将会从fromValue变化到fromValue+byValue。
toValue 和byValue都不为空，动画的效果将会从toValue-byValue变化到toValue。
只有fromValue的值不为空，动画的效果将会从fromValue的值变化到当前的状态。
只有toValue的值不为空，动画的效果将会从当前状态的值变化到toValue的值。
只有byValue的值不为空，动画的效果将会从当前的值变化到（当前状态的值+byValue）的值。

想要实现不同的效果，最关键的地方在于CABasicAnimation对象的初始化方式中keyPath的设定。在iOS中有以下几种不同的keyPath，代表着不同的效果：

transform.rotation.x //以x轴为中心旋转
transform.rotation.y //以y轴为中心旋转
transform.rotation.z //以z轴为中心旋转
transform.scale.x //缩放x轴方向
transform.scale.y //缩放y轴方向
transform.scale.z //缩放z轴方向，这个一般不会用到。
transform.scale //x，y方向整体缩放，z方向没看到效果。

下面我们来简单的做一个动画

- (void)springAnimation{
    CABasicAnimation *base = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
/*在动画结束之后是否让动画回到原处，这个属性的默认值是YES(回到原处),此时*fillMode*是没有作用的
如果设置为NO那么就需要设置一个*fillMode*属性，就是动画结束之后的状态，如果不设置，动画也会回到原处。*/
    base.removedOnCompletion = NO;
//动画结束之后状态的设置
    base.fillMode = kCAFillModeForwards;
    base.fromValue = @(2);
//动画时长
        base.duration = 10;
//动画的重复次数
        base.repeatCount = 100;
//给base动画设置延时启动
    base.beginTime = 2 + CACurrentMediaTime();
//动画是否按原路径返回
    base.autoreverses = YES;
//将动画添加到layer层*forKey*是给动画添加一个标记，方便删除。
        [self.redView.layer addAnimation:base forKey:@"basic"];
}

删除动画的方法

-(void)removeAnimationForKey:(NSString *)key;
key：你需要删除的动画的名称。
这个方法就是你把动画添加到那个视图的layer层上，就由那个视图的layer来调用。
-(void)removeAllAnimations;
这个法是删除这个视图layer层上的所有动画。

在这里简单介绍一下fillMode
注意：fillMode这个属性，必须要配合下面这个属性来使用。这个属性的默认值是YES(回到原处),此时fillMode是没有作用的如果设置为NO那么就需要设置一个fillMode属性，就是动画结束之后的状态，如果不设置，动画也会回到原处。

base.removedOnCompletion = NO;

kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态 
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了
一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个
layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初
始状态 
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之
前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

CAKeyframeAnimation

这个动画可以让你在动画的一些关键的位置来改变动画的frame以此来达到我们想要的效果。
position是描述动画视图的位置信息的，简单理解就是和视图的中心点一样，所以我们通过改变position属性，就可以改变动画的位置。
与position相对应得是锚点也就是anchorPoint，anchorPoint、position、frame这三者之间有着如下的关系。

position.x = frame.origin.x + anchorPoint.x * bounds.size.width； 
position.y = frame.origin.y + anchorPoint.y * bounds.size.height；

示例代码：下面是让一个视图左右震动的动画

 CAKeyframeAnimation *keyFram = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//layer最初的position值
    float position_x = self.redView.layer.position.x;
    float position_y = self.redView.layer.position.y;
//layer向左晃动的偏移量
    NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 30, position_y)];
//layer的原始位置
    NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
//layer向右晃动的偏移量
    NSValue *right = [NSValue valueWithCGPoint:CGPointMake(position_x + 30, position_y)];
//添加每一帧的Value值
    [keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];
    keyFram.repeatCount = 10;
    keyFram.repeatDuration = 1;
//为layer层添加动画
     [self.redView.layer addAnimation:keyFram forKey:@"aaa"];

CAAnimationGroup

CAAnimationGroup是一个组合动画，所谓的组合动画就是将多个动画组合到一起让它产生很炫酷的效果。
注意：所有的组合动画，它的延迟启动，重复次数等属性，同一在组里面设置，不要在单一的动画里面设置，以免出现问题。

第一步：初始化组合动画

CAAnimationGroup *group = [CAAnimationGroup animation];

第二步创建至少两个动画

    CABasicAnimation *base = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    /*在动画结束之后是否让动画回到原处，这个属性的默认值是YES(回到原处),此时*fillMode*是没有作用的
     如果设置为NO那么就需要设置一个*fillMode*属性，就是动画结束之后的状态，如果不设置，动画也会回到原处。*/
    base.removedOnCompletion = NO;
    //动画结束之后状态的设置
    base.fillMode = kCAFillModeForwards;
    base.fromValue = @(M_PI);
    //动画是否按原路径返回
    base.autoreverses = YES;
/************************************************************************************************/
    CAKeyframeAnimation *keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];
    //layer最初的position值
    float position_x = self.redView.layer.position.x;
    float position_y = self.redView.layer.position.y;
    //layer向左晃动的偏移量
    NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 50, position_y)];
    //layer的原始位置

    NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
    //layer向右晃动的偏移量
    NSValue *right = [NSValue valueWithCGPoint:CGPointMake(position_x + 50, position_y)];
    //添加每一帧的Value值
    [keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];

第三步将得到的动画放入group中

group.animations = @[base,keyFram];
    //将group加到layer上
    group.repeatCount = 100;
    group.repeatDuration = 10;
    [self.redView.layer addAnimation:group forKey:@"group"];

以上就是有关于CoreAnimation的简单介绍了，谢谢观看。