IOS动画之 CAKeyframeAnimation跟CABasicAnimation

一.简介

   本文只讲CAKeyframeAnimation跟CABasicAnimation的区别跟用法。

 1.相同点

      1:首先两类都是继承与同一个类 CAPropertyAnimation ，在使用上都是使用 animationWithKeyPath：方法；其次它们使用的KeyPath都是一些

CALayer的属性名称；在这里就几个常见的属性

    transform.scale  

    transform.scale.x

    transform.scale.y

    transform.rotation.z  // value  倍数

    opacity  //透明度0.0-1.0  可以做出那种逐渐透明那种颜色

    backgroundColor    背景颜色

    cornerRadius    圆角

    borderWidth     边宽

    borderColor     边颜色

    bounds          

    contents        //内容

    contentsRect

    frame

    hidden

    mask

    masksToBounds

    position

    shadowColor

    shadowOffset

    shadowOpacity

    shadowRadius

   2:常见常用属性

//动画执行时间

@property CFTimeInterval duration;

/* 重复执行次数，默认是0 ，需要重复执行时直接设置为MAXFLOAT*/

@property float repeatCount;

/* 当执行完一次动画后，是否按照执行的动画返回到初始状态  默认是NO */

@property BOOL autoreverses;

/*

kCAFillModeRemoved 这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态

kCAFillModeForwards 当动画结束后，layer会一直保持着动画最后的状态

kCAFillModeBackwards 在动画开始前，只需要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。

kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态。

当需要保留动画执行完后的状态时需要同时将fillMode属性设置为kCAFillModeForwards，removedOnCompletion设置成NO才有效果

*/

@property(copy) NSString *fillMode;

  2.不同之处

     1:CABasicAnimation多下面三个属性，当两个同时设置时以byValue跟fromValue时以fromValue为准；在给这个三个对象赋值的对象是创建CABasicAnimation对象时用的keypath值对应的对象；当keypath是基本数据类型时传NSNumber对象，结构体时封装成NSValue对象进行赋值。

//所改变属性的起始值

@property(nullable, strong) id fromValue;

//所改变属性的结束时的值

@property(nullable, strong) id toValue;

//所改变属性相同起始值的改变量

@property(nullable, strong) id byValue;

    2:显然CAKeyframeAnimation的属性比CABasicAnimation多很多，同时CABasicAnimation能实现的效果CAKeyframeAnimation它都能现实的；

/*执行这个动画中的关键帧 里面存放的对象跟上CABasicAnimation的三个属性类容为同一类型，要实现CABasicAnimation的效果只需要将@[fromValue,toValue]传给它，简单来说就是CABasicAnimation只实现啦2个关键帧的动画*/

@property(nullable, copy) NSArray *values;

/*对应values里面每一次改变所需要的时间，范围在0——1之间，默认是平分duration(这个动画的执行时间)*/

@property(nullable, copy) NSArray<NSNumber *> *keyTimes;

/*意思跟上面一样 CAMediaTimingFunction对象在一遍文章中有提到 */

@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;

/*

•在关键帧动画中还有一个非常重要的参数，那便是calculationMode，所谓计算模式：其主要针对的是每一帧的内容为一个座标点的情况，也就是对anchorPoint和 position进行的动画

•当在平面座标系中有多个离散的点的时候，可以是离散的，也可以直线相连后进行插值计算，也可以使用圆滑的曲线将他们相连后进行插值计算

•calculationMode目前提供如下几种模式：

–kCAAnimationLinear 默认值，表示当关键帧为座标点的时候，关键帧之间直接直线相连进行插值计算

–kCAAnimationDiscrete 离散的，不进行插值计算，所有关键帧直接逐个进行显示

–kCAAnimationPaced 使得动画均匀进行，而不是按keyTimes设置的或者按关键帧平分时间，此时keyTimes和timingFunctions无效

–kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算，这里的主要目的是使得运行的轨迹变得圆滑

–kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀，就是系统时间内运动的距离相同，此时keyTimes以及timingFunctions也是无效的

*/

@property(copy) NSString *calculationMode;

/*可以设置一个CGPathRef、CGMutablePathRef，让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path，那么values将被忽略*/

@property(nullable) CGPathRef path;

 3.动画组

  CAAnimationGroup对象只比CAAnimation多一个属性那就是：

/*里面添加CAAnimation对象，同时执行多个动画 当添加的CAAnimation对象设置相应属性是也设置的单个值优先，为设置是以CAAnimationGroup设置的为准*/

@property(nullable, copy) NSArray<CAAnimation *> *animations;

 下面一个下例子：

   

  CAKeyframeAnimation* widthAnim = [CAKeyframeAnimation animationWithKeyPath:@"borderWidth"];

    NSArray* widthValues = [NSArray arrayWithObjects:@1.0, @10.0, @5.0, @30.0, @0.5, @15.0, @2.0, @50.0, @10.0, nil];

    widthAnim.values = widthValues;

//    CABasicAnimation* widthAnim = [CABasicAnimation animationWithKeyPath:@"borderWidth"];

//    widthAnim.toValue=@20.0;

//    widthAnim.fromValue=@0.0;

    // Animation 2

    CAKeyframeAnimation* colorAnim = [CAKeyframeAnimation animationWithKeyPath:@"borderColor"];

    NSArray* colorValues = [NSArray arrayWithObjects:(id)[UIColor greenColor].CGColor,

                            (id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor,  nil];

    colorAnim.values = colorValues;

    // Animation group

    CAAnimationGroup* group = [CAAnimationGroup animation];

    group.animations = [NSArray arrayWithObjects:colorAnim, widthAnim, nil];

    group.duration = 5.0;

    group.removedOnCompletion=NO;

    group.fillMode=kCAFillModeForwards;

//    group.repeatCount=MAXFLOAT;

    group.autoreverses=YES;

    [imageView.layer addAnimation:group forKey:@"BorderChanges"];