iOS 动画详解

UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

 

动效设计一直是iOS平台的优点，良好的动效设计能够很好地提高用户体验。而动画则是动效的基础支撑。本动画将从易到难逐步分析，从CABasicAnimation，UIBezierPath，CAShapeLayer三个方面完整的阐述iOS动画的实现。最终的效果以下：

CABasicAnimation

1、概念
这个部分你须要了解如下概念: CALayer、CAAnimation、CAAnimationGroup

一、CALayer

CALayer是个与UIView很相似的概念，一样有backgroundColor、frame等类似的属性，咱们能够将UIView看作一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。咱们一样能够跟新建view同样新建一个layer，而后添加到某个已有的layer上，一样能够对layer调整大小、位置、透明度等。通常来讲，layer能够有两种用途：一是对view相关属性的设置，包括圆角、阴影、边框等参数，更详细的参数请点击这里；二是实现对view的动画操控。所以对一个view进行动画，本质上是对该view的.layer进行动画操纵。

二、CAAnimation

CAAnimation能够分为如下几类：

CABasicAnimation基础动画，经过设定起始点，终点，时间，动画会沿着你这设定点进行移动。能够看作特殊的CAKeyFrameAnimation
CAKeyframeAnimation关键帧动画，可定制度比CABasicAnimation高，也是本系列的接下来的内容
CAAnimationGroup组动画，支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行

实例化

使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性做为关键路径进行注册。

 

 

//围绕y轴旋转CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

 

设定动画的属性和说明属性说明

 

CABasicAnimation的属性

 

transformAnima.fromValue = @(M_PI_2);
transformAnima.toValue = @(M_PI);
transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transformAnima.autoreverses = YES;
transformAnima.repeatCount = HUGE_VALF;
transformAnima.beginTime = CACurrentMediaTime() + 2;

防止动画结束后回到初始状态只需设置removedOnCompletion、fillMode两个属性就能够了。

 

transformAnima.removedOnCompletion = NO;
transformAnima.fillMode = kCAFillModeForwards;

解释：为何动画结束后返回原状态？首先咱们须要搞明白一点的是，layer动画运行的过程是怎样的？其实在咱们给一个视图添加layer动画时，真正移动并非咱们的视图自己，而是 presentation layer 的一个缓存。动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。这就解释了为何咱们的视图在动画结束后又回到了原来的状态，由于它根本就没动过。
这个一样也能够解释为何在动画移动过程当中，咱们为什么不能对其进行任何操做。
因此在咱们完成layer动画以后，最好将咱们的layer属性设置为咱们最终状态的属性，而后将presentation layer 移除掉。
添加动画

[self.imageView.layer addAnimation:transformAnima forKey:@"A"];

 

fillMode属性的理解该属性定义了你的动画在开始和结束时的动做。默认值是 kCAFillModeRemoved。

kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到以前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便当即进入动画的初始状态。由于有可能出现fromValue不是目前layer的初始状态的状况，若是fromValue就是layer当前的状态，则这个参数就没太大意义。
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始以前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

Animation Easing的使用

也便是属性timingFunction值的设定，有种方式来获取属性值
（1）使用方法functionWithName:
这种方式很简单，这里只是简单说明一下取值的含义：

kCAMediaTimingFunctionLinear 传这个值，在整个动画时间内动画都是以一个相同的速度来改变。也就是匀速运动。
kCAMediaTimingFunctionEaseIn 使用该值，动画开始时会较慢，以后动画会加速。
kCAMediaTimingFunctionEaseOut 使用该值，动画在开始时会较快，以后动画速度减慢。
kCAMediaTimingFunctionEaseInEaseOut 使用该值，动画在开始和结束时速度较慢，中间时间段内速度较快。

动画的实现

CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];
positionAnima.fromValue = @(self.imageView.center.y);
positionAnima.toValue = @(self.imageView.center.y-30);
positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:
kCAMediaTimingFunctionEaseIn];
CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
transformAnima.fromValue = @(0);
transformAnima.toValue = @(M_PI);
transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CAAnimationGroup *animaGroup = [CAAnimationGroup animation];
animaGroup.duration = 2.0f;
animaGroup.fillMode = kCAFillModeForwards;
animaGroup.removedOnCompletion = NO;
animaGroup.animations = @[positionAnima,transformAnima];[self.imageView.layer addAnimation:animaGroup forKey:@"Animation"];

动画开始和结束时的事件为了获取动画的开始和结束事件，须要实现协议

 

positionAnima.delegate = self;

代理方法实现

 

//动画开始时
- (void)animationDidStart:(CAAnimation *)anim{
  NSLog(@"开始了");
}
//动画结束时
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//方法中的flag参数代表了动画是天然结束仍是被打断,好比调用了removeAnimationForKey:方法或removeAnimationForKey方法，flag为NO，若是是正常结束，flag为YES。
NSLog(@"结束了");
}

 

其实比较重要的是有多个动画的时候如何在代理方法中区分不一样的动画两种方式
方式一：
若是咱们添加动画的视图是全局变量，可以使用该方法。添加动画时，咱们使用了

 

[self.imageView.layer addAnimation:animaGroup forKey:@"Animation"];

 

因此，可根据key来区分不一样的动画

 

//动画开始时
- (void)animationDidStart:(CAAnimation *)anim{
　　if ([anim isEqual:[self.imageView.layer animationForKey:@"Animation"]]) {
　　　　NSLog(@"动画组执行了");
　　}
}

 

Note:把动画存储为一个属性而后再回调中比较，用来断定是哪一个动画是不可行的。应为委托传入的动画参数是原始值的一个深拷贝，不是同一个值
方式二
添加动画的视图是局部变量时，可以使用该方法添加动画给动画设置key-value对

 

[positionAnima setValue:@"PositionAnima" forKey:@"AnimationKey"];
[transformAnima setValue:@"TransformAnima" forKey:@"AnimationKey"];

因此，能够根据key中不一样的值来进行区分不一样的动画

 

//动画结束时
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
　　if ([[anim valueForKey:@"AnimationKey"]isEqualToString:@"PositionAnima"]) {
       　　 NSLog(@"位置移动动画执行结束");
　　} else if ([[anim valueForKey:@"AnimationKey"]isEqualToString:@"TransformAnima"]){
        　　NSLog(@"旋转动画执行结束");
　　}
}

一些经常使用的animationWithKeyPath值的总结

 

animationWithKeyPath值

UIBezierPath

使用UIBezierPath能够建立基于矢量的路径，此类是Core Graphics框架关于路径的封装。使用此类能够定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPath是CGPathRef数据类型的封装。若是是基于矢量形状的路径，都用直线和曲线去建立。咱们使用直线段去建立矩形和多边形，使用曲线去建立圆弧（arc）、圆或者其余复杂的曲线形状。

 

+ (instancetype)bezierPath;

 

这个使用比较多，由于这个工厂方法建立的对象，咱们能够根据咱们的须要任意定制样式，能够画任何咱们想画的图形。

 

+ (instancetype)bezierPathWithRect:(CGRect)rect;

这个工厂方法根据一个矩形画贝塞尔曲线。

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

 

这个工厂方法根据一个矩形画内切曲线。一般用它来画圆或者椭圆。

 

 

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadiu:(CGSize)cornerRadiu;

 

第一个工厂方法是画矩形，可是这个矩形是能够画圆角的。第一个参数是矩形，第二个参数是圆角大小。
第二个工厂方法功能是同样的，可是能够指定某一个角画成圆角。像这种咱们就能够很容易地给UIView扩展添加圆角的方法了。

 

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise;

 

这个工厂方法用于画弧，参数说明以下：
center: 弧线中心点的坐标
radius: 弧线所在圆的半径
startAngle: 弧线开始的角度值
endAngle: 弧线结束的角度值
clockwise: 是否顺时针画弧线

 

- (void)closePath;//闭合弧线

// 画三角形
- (void)drawTrianglePath { UIBezierPath *path = [UIBezierPath bezierPath];
　　[path moveToPoint:CGPointMake(20, 20)];
　　[path addLineToPoint:CGPointMake(self.frame.size.width - 40, 20)];
　　[path addLineToPoint:CGPointMake(self.frame.size.width / 2, self.frame.size.height - 20)];
 
　　// 最后的闭合线是能够经过调用closePath方法来自动生成的，也能够调用-addLineToPoint:方法来添加
　　// [path addLineToPoint:CGPointMake(20, 20)];
　　[path closePath];
　　// 设置线宽
　　path.lineWidth = 1.5;
　　// 设置填充颜色
　　UIColor *fillColor = [UIColor greenColor];
　　[fillColor set]; [path fill];
　　// 设置画笔颜色
　　UIColor *strokeColor = [UIColor blueColor];
　　[strokeColor set];
　　// 根据咱们设置的各个点连线
　　[path stroke];
}

 

咱们设置画笔颜色经过set方法：

 

若是咱们须要设置填充颜色，好比这里设置为绿色，那么咱们须要在设置画笔颜色以前先设置填充颜色，不然画笔颜色就被填充颜色替代了。也就是说，若是要让填充颜色与画笔颜色不同，那么咱们的顺序必须是先设置填充颜色再设置画笔颜色。以下，这二者顺序不能改变。由于咱们设置填充颜色也是跟设置画笔颜色同样调用UIColor的-set方法。

 

// 设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

CAShapeLayer

CAShapeLayer是在其坐标系统内绘制贝塞尔曲线(UIBezierPath)的。所以，使用CAShapeLayer须要与UIBezierPath一块儿使用。

它有一个path属性，而UIBezierPath就是对CGPathRef类型的封装，所以这二者配合起来使用才能够的哦！
CAShapeLayer与UIBezierPath的关系：

CAShapeLayer中shape表明形状的意思，因此须要形状才能生效
贝塞尔曲线能够建立基于矢量的路径，而UIBezierPath类是对CGPathRef的封装
贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，因此绘制出了Shape
用于CAShapeLayer的贝塞尔曲线做为path，其path是一个首尾相接的闭环的曲线，即便该贝塞尔曲线不是一个闭环的曲线

CAShapeLayer与UIBezierPath画圆

- (CAShapeLayer *)drawCircle {
    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    // 指定frame，只是为了设置宽度和高度
    circleLayer.frame = CGRectMake(0, 0, 200, 200);
    // 设置居中显示
    circleLayer.position = self.view.center;
    // 设置填充颜色
    circleLayer.fillColor = [UIColor clearColor].CGColor;
    // 设置线宽
    circleLayer.lineWidth = 2.0;
    // 设置线的颜色
    circleLayer.strokeColor = [UIColor redColor].CGColor;
    // 使用UIBezierPath建立路径
    CGRect frame = CGRectMake(0, 0, 200, 200);
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:frame];
    // 设置CAShapeLayer与UIBezierPath关联
    circleLayer.path = circlePath.CGPath;
    // 将CAShaperLayer放到某个层上显示
    [self.view.layer addSublayer:circleLayer]; 
    return circleLayer;
}