前言
文从CABasicAnimation，UIBezierPath，CAShapeLayer三个方面完整的阐述iOS动画的实现。
一、概念
1、CALayer
CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。一般来说，layer可以有两种用途：
一是对view相关属性的设置，包括圆角、阴影、边框等参数，更详细的参数请点击这里；
二是实现对view的动画操控。因此对一个view进行动画，本质上是对该view的.layer进行动画操纵。
2、CAAnimation
在iOS中
Core Animation层的动画是依赖CAAnimation类实现的。这里提到一个概念，那就是Core Animation层动画。没错，既然有所谓的Core Animation层动画那就应该有其他层动画。看下面的图：
图片.png
在iOS的不同图形层次中都可以写动画代码。越上层，封装程度越高，动画实现越简洁越简单，但是自由度越低；反之亦然。本系列着重介绍Core Animation层的基本动画实现方案。
CAAnimation可以分为以下几类：
CABasicAnimation基础动画，通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的
CAKeyframeAnimation关键帧动画，可定制度比CABasicAnimation高
CAAnimationGroup组动画，支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行
实例化
使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。
//围绕y轴旋转
CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
设定动画的属性和说明属性说明
图片.png
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值的总结
图片.png
缩放：
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
scaleAnimation.autoreverses = YES;
scaleAnimation.repeatCount = MAXFLOAT;
scaleAnimation.duration = 0.8;
移动:
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];
moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, groupLayer.position.y)];
moveAnimation.autoreverses = YES;
moveAnimation.repeatCount = MAXFLOAT;
moveAnimation.duration = 2;
旋转：
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
rotateAnimation.autoreverses = YES;
rotateAnimation.repeatCount = MAXFLOAT;
rotateAnimation.duration = 2;
GroupAnimation中：
CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
groupAnnimation.duration = 2;
groupAnnimation.autoreverses = YES;
groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
groupAnnimation.repeatCount = MAXFLOAT;
[groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation”];
// 移
CABasicAnimation *movedownAnimation = [CABasicAnimation animation];
movedownAnimation.keyPath = @"position.y";
movedownAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 400)];
CABasicAnimation *moveupAnimation = [CABasicAnimation animation];
moveupAnimation.keyPath = @"position.y";
moveupAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(400, 100)];
CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
groupAnnimation.duration = 5;
groupAnnimation.autoreverses = YES;
groupAnnimation.animations = @[movedownAnimation, moveupAnimation];
groupAnnimation.repeatCount = MAXFLOAT;
groupAnnimation.removedOnCompletion = NO;
// 始终保持最新的效果
groupAnnimation.fillMode = kCAFillModeForwards;
[_viewbg.layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];
网友评论