IOS基础知识-动画篇

核心动画的框架图：

image

CoreAnimation框架是基于OpenGL与CoreGraphics图像处理框架的一个跨平台的动画框架。

在CoreAnimation中大部分的动画都是通过Layer层来实现的，通过CALayer，我们可以组织复杂的层级结构。
在CoreAnimation中，大多数的动画效果是添加在图层属性的变化上，例如，改变图层的位置，大小，颜色，圆角半径等。Layer层并不决定视图的展现，它只是存储了视图的几何属性状态。

Core Animation结构图：

4408163-9c680e765e6cee63.png

CABasicAnimation——基本动画

基本动画，是CAPropertyAnimation的子类。
基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、旋转、缩放、透明度、背景色等。
基础动画根据 keyPath 来区分不同的动画,, 系统提供了多个类型,如: transform.scale (比例转换)、transform.scale.x、transform.scale.y、 transform.rotation(旋转) 、transform.rotation.x(绕x轴旋转)、transform.rotation.y(绕y轴旋转)、transform.rotation.z(绕z轴旋转)、opacity (透明度)、margin、backgroundColor(背景色)、cornerRadius(圆角)、borderWidth(边框宽)、bounds、contents、contentsRect、cornerRadius、frame、hidden、mask、masksToBounds、shadowColor(阴影色)、shadowOffset、shadowOpacity、shadowOpacity, 在使用时候, 需要根据具体的需求选择合适的.

🌰一个简单的动画效果

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
moveAnimation.duration = 0.8;//动画时间
//动画起始值和终止值的设置
moveAnimation.fromValue = @(self.imageView.center.x);
moveAnimation.toValue = @(self.imageView.center.x-30);
//一个时间函数，表示它以怎么样的时间运行
moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
moveAnimation.repeatCount = HUGE_VALF;
moveAnimation.repeatDuration = 2;
moveAnimation.removedOnCompletion = NO;
moveAnimation.fillMode = kCAFillModeForwards;
//添加动画，后面有可以拿到这个动画的标识
[self.imageView.layer addAnimation:moveAnimationforKey:@"可以拿到这个动画的Key值"];

相关属性
keyPath ：要改变的属性名称（传字符串）
fromValue：keyPath相应属性的初始值
toValue：keyPath相应属性的结束值
timingFunction：动画随时间运行的关系

image

动画过程说明

随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值fromValue渐渐地变为toValue
keyPath内容是CALayer的可动画Animation属性
如果fillMode=kCAFillModeForwards同时removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。

在CAAnimation中可以实现代理方法 <CAAnimationDelegate>
- animationDidStart: //开始时调用'
- animationDidStop:finished: //结束时调用
在addAnimation:forKey:方法中，也可以给这个动画设置一个键，可以在其他地方将其取出来，进行一些操作，比如删除。这也充分体现了kvc的灵活。
用到CALayer的 removeAnimationForKey:方法。

CAKeyframeAnimation——关键帧动画
关键帧动画，也是CAPropertyAnimation的子类。
如果是简单的动画CABasicAnimation就能完成，CAKeyframeAnimation（关键帧动画）弥补了基本动画只能传入一对对应值的不足，关键帧动画支持传入一套数值或一个路径来完成动画。
⚠️与CABasicAnimation的区别是：
CABasicAnimation：只能从一个数值（fromValue）变到另一个数值（toValue）
CAKeyframeAnimation：会使用一个NSArray保存这些数值
🌰一个关键帧动画代码

CAKeyframeAnimation *animaiton = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];  
NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];  
animaiton.values = rotationVelues;  
animation.rotationMode = kCAAnimationRotateAuto;  //方向
animaiton.duration = 3.0f;  
animation.keyTimes = @[@0.2 ,@0.8 ,@1];
animation.path = bezierPath.CGPath;
animaiton.repeatCount = HUGE_VALF;     //   #define    HUGE_VALF    1e50f  
[self.imageView.layer addAnimation:animaiton forKey:nil];

属性说明
values：上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间（duration）内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef、CGMutablePathRef，让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点，其取值范围为0到1.0，keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes，各个关键帧的时间是平分的
bezierPath：贝赛尔曲线路径，为动画提供一个动画移动的路线。

UIBezierPath - 贝赛尔曲线

//创建路径
UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
[bezierPath moveToPoint:CGPointMake(0, 450)];
[bezierPath addCurveToPoint:CGPointMake(370, 500) controlPoint1:CGPointMake(350, 200) controlPoint2:CGPointMake(300, 600)]; //一个曲线     
//路径样式
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = bezierPath.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor; //填充色<默认黑色>
shapeLayer.strokeColor = [UIColor blueColor].CGColor; //线色
shapeLayer.lineWidth = 2;
[self.view.layer addSublayer:shapeLayer];

UIBezierPath 创建一个路径，画出一条曲线。栗子中起点(0，450)、终点(370，500) 和 (350，200)、(370，500)来个点来确定线的路径。模拟器更多参考
CAShapeLayer 对上面的线进行属性上的设置。最后添加到一个layer上。
++CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation++

CAAnimationGroup——动画组
动画组，是CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
属性说明

animations：用来保存一组动画对象的NSArray
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[animation,basicAnimation];
animationGroup.duration = 4;
animation.repeatCount = 9;
[_imageLayer addAnimation:animationGroup forKey:@"changeColor"];

++默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间++
转场动画——CATransition
CATransition是CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点。
++UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果++

CATransition *caTransition = [CATransition animation];
caTransition.duration = 0.5;
caTransition.delegate = self;
caTransition.timingFunction = [CAMediaTimingFunction functionWithName:@"easeInEaseOut"];//切换时间函数
caTransition.type = kCATransitionReveal;//动画切换风格
caTransition.subtype = kCATransitionFromLeft;//动画切换方向

//    子视图交换位置
//[self.parentView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
//动画在父视图
[self.parentView.layer addAnimation:caTransition forKey:@"Key"];

动画属性
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

//    导航栏切换
UIViewController *viewCtr = [[UIViewController alloc] init];
viewCtr.view.backgroundColor = [UIColor redColor];
[self.navigationController pushViewController:viewCtr animated:NO];// 动画设置 NO 效果比较好
[self.navigationController.view.layer addAnimation:caTransition forKey:@"animation"];

动画的各个属性及作用

fromValue: 动画的开始值(Any类型, 根据动画不同可以是CGPoint、NSNumber等)
toValue: 动画的结束值, 和fromValue类似
beginTime: 动画的开始时间
duration : 动画的持续时间
repeatCount : 动画的重复次数
fillMode: 动画的运行场景
isRemovedOnCompletion: 完成后是否删除动画
autoreverses: 执行的动画按照原动画返回执行
path：关键帧动画中的执行路径
values: 关键帧动画中的关键点数组
animations: 组动画中的动画数组
delegate : 动画代理, 封装了动画的执行和结束方法
timingFunction: 控制动画的显示节奏, 系统提供五种值选择，分别是：
1.kCAMediaTimingFunctionDefault( 默认，中间快)
2.kCAMediaTimingFunctionLinear (线性动画)
3.kCAMediaTimingFunctionEaseIn (先慢后快 慢进快出）
4.kCAMediaTimingFunctionEaseOut (先块后慢快进慢出）
5.kCAMediaTimingFunctionEaseInEaseOut (先慢后快再慢)
type： 过渡动画的动画类型，系统提供了多种过渡动画, 分别是:
1: fade (淡出 默认)
2: moveIn (覆盖原图)
3: push (推出)
4: fade (淡出 默认)
5: reveal (底部显示出来)
6: cube (立方旋转)
7: suck (吸走)
8: oglFlip (水平翻转 沿y轴)
9: ripple (滴水效果)
10: curl (卷曲翻页 向上翻页)
11: unCurl (卷曲翻页返回 向下翻页)
12: caOpen (相机开启)
13: caClose (相机关闭)
subtype : 过渡动画的动画方向, 系统提供了四种,分别是:
1.fromLeft( 从左侧)
2.fromRight (从右侧)
3.fromTop (有上面）
4.fromBottom (从下面）