核心动画CoreAnimation，快速入手动画

关于动画这一块，之前由于用的很少，也很少有研究，最多停留在UIView的基本动画上。最近学习了一下核心动画CoreAnimation，主要是显式动画以及关键帧动画，这些都是动画深入的基础，挺受益的，现在将一些心得写下来。

先来认识两个关键词：
CALayer：图层类
CAAnimation：动画类
打个比方来说，比如拍电影，会有演员，而CALayer在这里就充当演员的角色，不管干啥，都会去操纵这个CALayer去做若干操作，除了演员，我们还需要剧本，CAAnimation在这里就是剧本，告诉演员CALayer怎么去做。
CAAnimation在这里我介绍一下显式动画和关键帧动画，两者的区别在于后者能够顺着我们设定的路线进行移动，前者则是做一些本身的动画效果。

直接贴代码
1.CABasicAnimation显式动画

1.先定义一个imageView

    UIImageView *imgView = [[UIImageView alloc   ] initWithImage:[UIImage imageNamed:@"jour"]];
    imgView.frame = CGRectMake(150, 300, 80, 100);
    [self.view addSubview:imgView];

2.选定角色，指定角色CALayer为imgView的layer图层

    CALayer *imgLayer = [[CALayer alloc] init];
    imgLayer = imgView.layer;

3.写剧本，显示动画类CABasicAnimation

//写第一个剧本
    CABasicAnimation *scaleAnimate = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//x,y轴同时缩放的keypath
    scaleAnimate.fromValue = [NSNumber numberWithFloat:1.0]; //缩放倍数
    scaleAnimate.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimate.autoreverses = YES; //造成回路
    scaleAnimate.repeatCount = MAXFLOAT; //无限重复
    scaleAnimate.duration = 2.0; //每组间隔
    
    //写第二个剧本，用来透明（时隐时现）
    CABasicAnimation *opaqueAnimate = [CABasicAnimation animationWithKeyPath:@"opacity"]; //opacity是透明的keypath
    opaqueAnimate.fromValue = [NSNumber numberWithFloat:0.0];
    opaqueAnimate.toValue = [NSNumber numberWithFloat:1.0];
    opaqueAnimate.autoreverses = YES;
    opaqueAnimate.repeatCount = MAXFLOAT;
    opaqueAnimate.duration = 2.0;
    
    //第三个剧本，旋转
    CABasicAnimation *xuanzhuanAnimate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //根据z轴来旋转
    xuanzhuanAnimate.fromValue = [NSNumber numberWithFloat:0];
    xuanzhuanAnimate.toValue = [NSNumber numberWithFloat:3.1415926];
    xuanzhuanAnimate.repeatCount = MAXFLOAT;
    xuanzhuanAnimate.removedOnCompletion = YES;
//    xuanzhuanAnimate.autoreverses = YES;  
     xuanzhuanAnimate.duration = 2.0;

4.把剧本交给演员开始动画

//把剧本交给演员开始动画
    [imgLayer addAnimation:scaleAnimate forKey:nil];
    [imgLayer addAnimation:opaqueAnimate forKey:nil];
    [imgLayer addAnimation:xuanzhuanAnimate forKey:@"animateTransform"]; 

上面加了三个剧本效果，效果如下：

xuanzhuan.gif

2.再来介绍一下关键帧动画CAKeyframeAnimation
关键帧动画是根据几个点的位置，然后来回移动的，所以涉及到position

    UIImageView *photoView = [[UIImageView alloc   ] initWithImage:[UIImage imageNamed:@"jour"]];
    photoView.frame = CGRectMake(150, 400, 80, 100);
    [self.view addSubview:photoView];
   //选角
     CALayer *photoLayer = photoView.layer;

//设定关键帧，从第一个点，到最后一个点，再到第一个点(先设置所有点的位置)
    NSValue *valueOne = [NSValue valueWithCGPoint:photoLayer.position];
    NSValue *valueTwo = [NSValue valueWithCGPoint:CGPointMake(photoLayer.position.x, photoLayer.position.y +200)];
    NSValue *valueThree = [NSValue valueWithCGPoint:CGPointMake(photoLayer.position.x - 150, photoLayer.position.y +200)];
    NSValue *valueFour = [NSValue valueWithCGPoint:CGPointMake(photoLayer.position.x - 150, photoLayer.position.y)];
    NSValue *valueFive = [NSValue valueWithCGPoint:photoLayer.position];
    keyAnimate.values = @[valueOne,valueTwo,valueThree,valueFour,valueFive];
    keyAnimate.autoreverses = false;
    keyAnimate.repeatCount = MAXFLOAT;
    keyAnimate.duration = 10.0;

//上面的曲线是个矩形，总共有四段，所以接下来设置每段的移动速度

    CAMediaTimingFunction *tfOne = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//先慢 后慢 中间快
    CAMediaTimingFunction *tfTwo = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];//匀速
    CAMediaTimingFunction *tfThree = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//先慢
    CAMediaTimingFunction *tfFour = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//后慢
    keyAnimate.keyTimes = @[@"0.0",@"0.1",@"0.8",@"0.9",@"1"];//这个属性设置的话，就是用来控制各区间段的运动速率的，第一段就是0.1-0.0，第二段就是0.8-0.1以此类推，范围是在0-1之间，这是倍数，再乘以上面的duration就是个分段的运行时间
    keyAnimate.timingFunctions = @[tfOne,tfTwo,tfThree,tfFour];

//开始

//start
    [photoLayer addAnimation:keyAnimate forKey:nil];

该关键帧动画效果如下：

timeZ.gif

如果您喜欢我的文章请点个赞~