关于动画这一块，之前由于用的很少，也很少有研究，最多停留在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
如果您喜欢我的文章请点个赞~
