iOS CAAnimation使用详解

理解了隐式动画后,显式动画就更加通俗易懂了。区别于隐式动画的特点,显式动画就是需要我们明确指定类型、时间等参数来实现效果的动画。除此之外,我们也可以创建非线性动画,比如沿着任意一条曲线运动等;
我们平时最常用的也是显式动画,不仅系统为我们的视图提供了UIViewAnimationWithBlock的动画封装,而且我们在熟悉了Core Animation的动画属性后也可以很方便的设置显式动画;

一、动画的分类

1、实现动画的方式

如果根据实现动画时直接操作对象的类型,我们可以简单的将动画分为视图和图层两种;但事实上,无论UIViewAnimaiton动画还是UIViewAnimaitonWithBlock动画都只是对UIView的关联图层CALayer动画的进一步封装。
在这里插入图片描述

2.核心动画Core Animation常用类的继承关系

我们在使用Core Animation动画之前,有必要对核心动画常见的类和动画属性做一个基本了解;从继承关系的图示中,我们可以十分清晰的看出这些属性设置设置因何而来,以及它们各自的联系。
在这里插入图片描述

动画类动画特性
CAMediaTiming协议;定义了一段动画内用于控制时间的属性的集合
CAAnimation抽象类;作为所有动画类型父类,不可直接使用
CAPropertyAnimation抽象类;作为基础动画和帧动画的父类,不可直接使用
CABasicAnimation基础动画;用于实现单一属性变化的动画
CAKeyFrameAnimation关键帧动画;用于实现单一属性连续变化的动画
CAAnimaitionGroup组动画;用于实现多属性同时变化的动画
CATrasition转场过渡动画;

二、CAMediaTiming协议

CAMediaTiming协议定义了一段动画内用于控制时间的属性的集合,CALayerCAAnimation都实现了这个协议,所以时间可以被任意基于一个图层或者一段动画的类控制,有关CAMediaTimg协议具体的属性如下:

属性参数类型具体描述
beginTimeCFTimeInterval动画开始之前的延迟时间,这里的延迟从动画添加到可见图层上那一刻开始测量;
(设置动画beginTime为1,动画将延时1秒后开始执行)
durationCFTimeInterval动画持续时间;
(默认值为0,但是实际动画默认持续时间为0.25秒)
speedfloat动画执行的速度;
(默认值为0,减少它会减慢动画的时间,增加它会加快速度)
(设置speed为2时,则动画实际执行时间是duration的一半)
timeOffsetCFTimeInterval动画时间偏移量;
(设置时长3秒动画的timeOffset为1时,动画会从1秒位置执到最后,再执行之前跳过的部分)
repeatCountfloat动画重复次数;默认值是0,但是实际默认动画执行1次;
(设置为INFINITY,则一直执行);
(duration是2,repeatCount设置为3.5,则完整动画时长7秒)
repeatDurationCFTimeInterval动画重复的时间,让动画重复执行一个指定的时间;
(设置为INFINITY,一直执行)
repeatCount和repeatDuration可能会相互冲突,所以你只需要对其中一个指定非零值,对两个属性都设置非0值的行为没有被定义;
autoreversesBOOL动画从初始值执行到最终值,是否会反向回到初始值;
(设置为YES,动画完成后将以动画的形式回到初始位置)
fillModeNSStrinng决定当前对象在非动画时间端段的动画属性值,如动画开始之前和动画结束之后

1. fillMode详细说明

试想这样一个问题:在beginTime非0(即动画未真正执行之前),以及removeOnCompletion被设置为NO的动画结束时,我们会遇到这样一个问题:被设置动画的属性应该是什么值?
一种可能是属性与动画没被添加之前保持一致,还有一种可能是保持动画开始之前那一帧或者动画结束那一帧,这就是所谓的填充。
CAMediaTimingfillMode用来控制填充效果,它是一个NSString类型,有四种常量可供使用:

fillMode类型参数类型具体描述
kCAFillModeRemoved (default)NSString默认值,动画开始前和结束后,动画对图层都没有影响,图层依然保持初始值
kCAFillModeForwardsNSString动画结束后,图层一直保持动画后的最终状态
kCAFillModeBackwardsNSString动画开始前,只要加入动画就会处于动画的初始状态
kCAFillModeBothNSString综合了kCAFillModeForwards与kCAFillModeBackwards特性;
(动画加入图层到真正执行动画的时间段里,图层保持动画初始状态;动画结束之后保持动画最终状态)
特别注意:removedOnCompletion需要设置为NO,否则fillMode不起作用;

2. CAMediaTiming属性应用总结

在这里插入图片描述

三、CAAnimation基类

CAAnimation作为所有动画类型父类,是一个抽象类;我们不能直接使用CAAnimation类,而是使用它的子类;关于它的定义如下:

@interface CAAnimation : NSObject<NSSecureCoding, NSCopying, CAMediaTiming, CAAction>

@property(nullable, strong) CAMediaTimingFunction *timingFunction;
@property(nullable, strong) id <CAAnimationDelegate> delegate;
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

@end

可以看到,CAAnimation动画基类遵循了CAMediaTiming协议,而且另外包含了三个常用的动画属性;下面是对这三个属性的总结:

1. 动画缓冲属性timingFunction

动画实际上就是在一段时间内随着某个特定速率执行变化的过程,现实中的任何物体都会在运动中经历加速或者减速的过程,而不是速度骤变;因此,CoreAnimation也内嵌了一系列标准的缓冲函数来使动画看起来更平滑自然,这就是我们要说到的动画缓冲。
timingFunction属性是CAMediaTimingFunction类的一个对象,用来控制图层动画变换的速度;使用它需要调用+functionWithName:的构造方法,下面是可传入的变量的介绍:

变量名具体说明
KCAMediaTimingFuncationLinear默认,匀速执行动画
KCAMediaTimingFuncationEaseIn先慢慢加速,后突然停止
KCAMediaTimingFuncationEaseOut先全速开始,再慢慢减速停止
KCAMediaTimingFuncationEaseInEaseOut先慢慢加速,再慢慢减速
KCAMediaTimingFuncationDefault效果同KCAMediaTimingFuncationEaseInEaseOut

这五种不同的缓冲效果如下:
在这里插入图片描述

通过这种方法控制动画速度,其实是使用不同的变量创建了不同的计时函数。比如KCAMediaTimingFuncationLinear选项创建的是一个线性的计时函数,这也是CAAnimationtimingFunction属性为空时候的默认函数。

注意:KCAMediaTimingFuncationDefault相比KCAMediaTimingFuncationEaseInEaseOut的加速和减速过程稍微有些慢,两者区别很难察觉;可能苹果也觉得它更适合用于隐式动画,就作为了隐式动画的默认效果;但是创建显式的CAAnimation时,KCAMediaTimingFuncationLinear才是默认效果而非KCAMediaTimingFuncationDefault

UIKit动画其实也同样支持这些缓冲效果的使用,在我们使用UIViewAnimationBlock实现动画的时候,可以给options参数提供了如下的常量来修改缓冲效果:

变量名具体说明
UIViewAnimationOptionCurveLinear默认,匀速执行动画
UIViewAnimationOptionCurveEaseIn先慢慢加速,后突然停止
UIViewAnimationOptionCurveEaseOut先全速开始,再慢慢减速停止
UIViewAnimationOptionCurveEaseInOut先慢慢加速,再慢慢减速

2. 动画代理属性delegate

/* Delegate methods for CAAnimation. */
@protocol CAAnimationDelegate <NSObject>

@optional
//动画开始时调用
- (void)animationDidStart:(CAAnimation *)anim;
//动画结束时调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

3. removedOnCompletion

removedOnCompletion属性默认为YES,表示动画完成后就会从图层上移除,图层也会恢复到动画执行前的状态;当其修改为NO时,那么图层将会保持动画结束后的状态,此时的fillMode属性也将生效;

另外,removedOnCompletion设置为NO时,直到我们手动移除动画,否则动画将不会自动释放;所以通常我们此时会给动画添加一个非空的键,这样可以在不需要动画的时候把它从图层上移除;

四、CAPropertyAnimation基类

CAPropertyAnimation是一个抽象类,不能直接用于实现CALayer动画操作,但是它的类定义中增加用于设置CALayer可被实现动画的属性keyPath,总结这些属性如下:

属性解读
transform.rotation默认围绕z轴旋转,相当于transform.rotation.z
transform.rotation.x
transform.rotation.y
transform.rotation.z
分别围绕x轴、y轴、z轴旋转;
transform.scale在所有方向上进行缩放
transform.scale.x
transform.scale.y
transform.scale.z
分别在x轴、y轴、z轴方向上缩放;
transform.translation平移到指定坐标点
transform.translation.x
transform.translation.y
transform.translation.z
分别在x轴、y轴、z轴方向上平移;
zPositionz轴位置
opacity透明度
backgroundColor背景颜色
cornerRadius圆角大小
borderWidth边框宽度
bounds图层大小
contents寄宿图内容
contentsRect可视内容
position图层位置,类似transform.translation
shadowColor阴影颜色
shadowOffset阴影偏移
shadowOpacity阴影透明度
shadowRadius阴影角度
附:KeyPath官方参考链接

五、基础动画CABasicAnimation

CABasicAnimation即基础动画,在指定可动画属性后,动画会按照预定的参数持续一定时间由初始值变换为终点值。其实,CABasicAnimation就相当于只有开始和结束两个帧的特殊关键帧动画(后续会详解);

1. 属性说明

属性属性说明
fromValue起始值
toValue结束值
byValuekeyPath属性的变化值

2. 动画演示

下面的示例使用CABasicAnimation实现了修改颜色图层colorLayer的背景色为随机颜色的动画,具体的代码如下:

@interface TestBacicAnimation1VC() <CAAnimationDelegate>
@property(nonatomic, strong) CALayer *colorLayer;
@end

@implementation TestBacicAnimation1VC

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建显示颜色的图层,添加于视图控制器的View上
    CALayer *colorLayer = [CALayer layer];
    colorLayer.frame = CGRectMake(50, 50, 100, 100);
    colorLayer.backgroundColor = [UIColor redColor].CGColor;
    self.colorLayer = colorLayer;
    [self.view.layer addSublayer:colorLayer];
}

- (IBAction)changeColor:(UIButton *)sender{
    //步骤1:创建动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"backgroundColor";
    //步骤2:设定动画属性
    animation.autoreverses = NO;
    animation.duration = 0.25;
    animation.repeatCount = 1;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    UIColor *randomColor = [UIColor randomColor];  //自定义获取随机色的方法
    animation.toValue = (__bridge id _Nullable)(randomColor.CGColor);
    //步骤3:添加动画到图层
    [self.colorLayer addAnimation:animation forKey:@"keyPath_backgroundColor"];
}

- (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag {
    //禁用隐式动画
    [CATransaction begin];
    [CATransaction setDisableActions:true];
    self.colorLayer.backgroundColor = (__bridge CGColorRef)anim.toValue;
    [CATransaction commit];
}    

效果图如下:
在这里插入图片描述
总结创建动画的两种方式如下:

//方法1:实例化同时指定动画类型
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];

//方法2:先实例化,再指定动画类型
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"backgroundColor";

3. 关闭隐式动画

对独立图层(即非UIView的关联图层,类似上述例子中的colorLayer)做更新属性的显式动画,我们需要设置一个事务来禁用图层行为,否则动画会发生两次,一次是因为显式的CABasicAnimation,另一次是因为隐式动画,从而导致我们看到的动画异常。

六、关键帧动画CAKeyframeAnimation

CAKeyfameAnimationCAPropertyAnimation的另一个子类,它和CABasicAnimation一样都只能作用于图层对象的单一属性;它们的区别在于:CACAKeyfameAnimation不限制于设置一个起始值和结束值,而是可以根据一连串的值来做动画。其实,CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation

1. 关键帧动画常用属性总结

关键帧动画相对于基础动画的具有一些独特的属性,我们现将其总结如下:

属性具体描述
values用于提供关键帧数据的数组,数组中每一个值都对应一个关键帧属性值;
数组中的数据类型根据动画类型(KeyPath)而不同;
当使用path的时候,values的值将会被自动忽略;
path用于提供关键帧数据的路径;
path与values属性作用相同,但是两者互斥,同时指定values和path,path会覆盖values的效果;
keyTimeskeyTimes与Values中的值具有一一对应的关系,用于指定关键帧在动画的时间点,取值范围是[0,1];
若没有设置keyTimes,则每个关键帧的时间是平分动画总时长(duration);
timingFunctions用于指定每个关键帧之间的动画缓冲效果,这类似于物体运动的加速度;
注意:存在几个子路径就应该在此数组中传入几个元素;
calculationMode该属性决定了物体在每个子路径下是跳着走还是匀速走,跟timeFunctions属性有点类似;
rotationMode设置帧动画是否需要按照路径切线的方向运动;

2. 实现帧动画:使用values

从关键帧动画的属性可以看出,我们可以总结出关键帧动画的实现方式实际分为两种:

  1. 通过values设置关键帧属性值数组;
  2. 通过path设置关键帧路径,而且此种方式的优先级较高;

这里首先测试第一种方式,实现这样的关键帧动画:创建一个紫色滑块在四个坐标点之间滑动;具体的代码实现如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建测试帧动画的紫色图层
    UIView *purpleView = [UIView new];
    purpleView.frame = CGRectMake(0, 0, 50, 50);
    purpleView.center = CGPointMake(50, 100);
    purpleView.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:purpleView];
    
    //步骤1:创建动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    //步骤2:设置动画关键帧数据
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kDeviceWidth -50, 100)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kDeviceWidth -50, kDeviceWidth- 100)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kDeviceWidth -100)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];
    animation.values = @[value1,value2,value3,value4,value5];
    //步骤3:设定动画属性
    animation.repeatCount = MAXFLOAT; //重复执行
    animation.autoreverses = NO;
    animation.removedOnCompletion = NO;
    animation.duration = 4;
    //animation.keyTimes = @[@(0), @(1 / 10.0), @(5 / 10.0), @(9 / 10.0), @(1) ];
    animation.timingFunctions  = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    [purpleView.layer addAnimation:animation forKey:nil];
}

关键帧动画效果如下:
在这里插入图片描述

3. 实现关键帧动画:使用path

现在,我们测试CAKeyframeAnimation使用path实现这样一个动画:一架飞机沿着一个简单的曲线运动飞行;具体的操作包括以下几个步骤:

  1. 使用UIKit提供的UIBezierPath类创建贝塞尔曲线,作为飞机飞行的路线轨迹;
  2. 使用CAShapeLayer在屏幕上绘制曲线(此步骤对于动画不是必须的,只是为了动画看起来更直观);
  3. 创建用于显示飞机的视图,将其设置在贝塞尔曲线的初始位置;
  4. 创建并执行关键帧动画,实现飞机飞行的曲线动画;
- (void)viewDidLoad {
    [super viewDidLoad];
    //1.创建三次贝塞尔曲线(一种使用起始点,结束点和另外两个控制点定义的曲线);
    UIBezierPath *bezierPath  = [[UIBezierPath alloc] init];
    [bezierPath moveToPoint:CGPointMake(50, 200)];
    [bezierPath addCurveToPoint:CGPointMake(kDeviceWidth - 50, 200)
                controlPoint1:CGPointMake(150, 50)
                controlPoint2:CGPointMake(kDeviceWidth - 150, 250)];
    
    //2.绘制飞行路线
    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.path = bezierPath.CGPath;
    pathLayer.fillColor = [UIColor clearColor].CGColor;
    pathLayer.strokeColor = [UIColor redColor].CGColor;
    pathLayer.lineWidth = 3.0f;
    [self.view.layer addSublayer:pathLayer];
    
    //3.创建显示飞机的视图
    UIImageView *airPlaneImgView = [[UIImageView alloc] init];
    airPlaneImgView.frame = CGRectMake(0, 0, 50, 50);
    airPlaneImgView.center = CGPointMake(50, 200);
    airPlaneImgView.image = [UIImage imageNamed:@"airplane"];
    [self.view addSubview:airPlaneImgView];
    
    //4.设置关键帧动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    animation.duration = 5.0;
    animation.path = bezierPath.CGPath;
    animation.rotationMode = kCAAnimationRotateAuto; //设置根据曲线的切线自动旋转,让动画更加真实
    [airPlaneImgView.layer addAnimation:animation forKey:nil];
}

关键帧动画效果图如下:
在这里插入图片描述

七、动画组CAGroupAnimation

CAGroupAnimation顾名思义,就是可以将不同的动画效果组合起来,CABasicAnimationCAKeyframeAnimation都仅仅作用于单一的属性,而CAAnimationGrop可以设置其animations数组的属性来组合别的动画,从而达到混合多种动画效果的目的;

下面演示一个动画组的示例:组合基础动画和关键帧动画,实现一个滑块在沿path运动过程修改其颜色,具体的测试代码如下:

@interface TestAnimationGroupVC()

@property(nonatomic, strong) UIView *colorView;
@property(nonatomic, strong) UIBezierPath *bezierPath;

@end

@implementation TestAnimationGroupVC

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建显示颜色的图层
    self.colorView = [UIView new];
    self.colorView.frame = CGRectMake(0, 0, 60, 60);
    self.colorView.center = CGPointMake(50, 200);
    self.colorView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:self.colorView];
    
    //创建贝塞尔曲线,即帧动画运动轨迹
    self.bezierPath  = [[UIBezierPath alloc] init];
    [self.bezierPath moveToPoint:CGPointMake(50, 200)];
    [self.bezierPath addCurveToPoint:CGPointMake(kDeviceWidth - 50, 200) controlPoint1:CGPointMake(150, 50) controlPoint2:CGPointMake(kDeviceWidth - 150, 250)];
    
    //绘制绘制path,便于观察动画;
    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.path = self.bezierPath.CGPath;
    pathLayer.fillColor = [UIColor clearColor].CGColor;
    pathLayer.strokeColor = [UIColor redColor].CGColor;
    pathLayer.lineWidth = 3.0f;
    [self.view.layer addSublayer:pathLayer];
}

- (IBAction)startAnimation:(UIButton *)sender{   
    //移除可能未执行完的动画,防止多重动画导致异常
    [self.colorView.layer removeAnimationForKey:@"groupAnimation"];
    
    //1.创建基础动画:修改背景色为紫色
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    basicAnimation.keyPath = @"backgroundColor";
    basicAnimation.toValue = (__bridge id _Nullable)([UIColor purpleColor].CGColor);
    
    //2.创建关键帧动画
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
    keyFrameAnimation.keyPath = @"position";
    keyFrameAnimation.path = self.bezierPath.CGPath;
    keyFrameAnimation.rotationMode = kCAAnimationRotateAuto;
    
    //3.创建组动画:组合基础动画和关键帧动画
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = @[basicAnimation, keyFrameAnimation];
    groupAnimation.duration = 4.0;
    [self.colorView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];
}

动画组的效果如下:
在这里插入图片描述

八、过渡动画CATransition

1. 过渡动画简介

属性动画只能对图层的可动画属性起作用,而过渡动画可以改变非动画属性(比如交换一段文本和图片),或者从层级关系中添加或者移除图层;于是就有了过渡的概念;

过渡动画使用CATransition来实现,它同样是CAAnimation的子类;它并不像属性动画那样在平滑的两个值之间做动画,而是影响到整个图层的变化。过渡动画首先展示之前的图层外观,然后通过一个交换过渡到新的外观。

过渡动画通常用于删除子控件、添加子控件、切换两个子控件等。

2. 过渡动画属性介绍

过渡动画有typesubtype两个关键属性,type用于指定动画类型,subtype用于指定动画移动的方向;

type属性:
type属性是一个NSString类型,用于控制整体动画效果类型,具体的可选类型如下:

type值动画效果对应常量是否支持方向
fade默认效果,渐变kCATransitionFade
moveIn覆盖kCATransitionMoveIn
Push退出kCATransitionPush
Reveal揭开kCATransitionReveal
cube立方体无(私有类型)
suckEffect收缩无(私有类型)
oglFlip翻转无(私有类型)
rippleEffect水波动画无(私有类型)
pageCurl页面揭开无(私有类型)只支持左右方向
vpageUnCurl放下页面无(私有类型)只支持左右方向
cameraIrisHollowOpen镜头打开无(私有类型)
cameraIrisHollowClose镜头关闭无(私有类型)

目前为止,我们只能使用type的前四种公开属性,但是我们可以通过一些别的方法来自定义过渡效果(后续介绍);

subtype属性:
subtype属性也是一个NSString类型,用于控制动画方向,具体的可选类型如下:

Subtype类型具体描述
kCATransitionFromRight从右向左
kCATransitionFromLeft从左向右
kCATransitionFromTop从上向下
kCATransitionFromBottom从下向上

3. 过渡动画的使用

现在设想这样的一个需求:修改UIImageViewimage属性,实现淡入淡出的平滑动画的效果;此时我们需要使用CATransition来对非动画属性做动画,具体的关键代码如下:

@interface TestTransition1VC()

@property(nonatomic, strong) UIImageView *imageView;
@property(nonatomic, strong) NSArray *images;

@property(nonatomic, copy) NSString *type;
@property(nonatomic, copy) NSString *subtype;

@end

@implementation TestTransition1VC

- (void)viewDidLoad {
    [super viewDidLoad];
    self.images = @[[UIImage imageNamed:@"tree_spring"],
                    [UIImage imageNamed:@"tree_summer"],
                    [UIImage imageNamed:@"tree_autumn"],
                    [UIImage imageNamed:@"tree_winter"]];
    
    self.type = kCATransitionFade;
    self.subtype = kCATransitionFromRight;
}

- (void)perforomTransitionAnimation{
    CATransition *transition = [[CATransition alloc] init];
    transition.type = _type;
    transition.subtype = _subtype;
    transition.duration = 0.5;
    [self.imageView.layer addAnimation:transition forKey:nil];
    
    UIImage *currentImage = self.imageView.image;
    NSUInteger index = [self.images indexOfObject:currentImage];
    index = (index + 1) % self.images.count;
    self.imageView.image = self.images[index];
}

过渡动画的效果如下:
在这里插入图片描述
注意:和属性动画不同,对指定图层一次只能使用那一次CATransition,因此无论对动画的键设置为什么值,过渡动画都会对它的键设置为”transition”,也就是常量KCATransition.

4. 隐式过渡

CATransition可以对图层任何变化平滑过渡,这使得它成为那些不好做动画的属性图层行为的理想之选。所以,苹果将CATransition作为设置CALayercontents属性时的默认行为,对图层contents图片做的改动都会自动附上淡入淡出的效果,这也就解释了隐式动画的原理;
但注意:

  1. 对于视图关联的图层,过渡动画的默认效果是禁用的;
  2. 我们不能错误的理解CATransition只可以改变非动画属性,其实它也可以对类似backgroundColor的属性做过渡效果动画;

5. 自定义过渡动画

过渡动画的过程就是对原始图层外观截图,然后添加一段动画,平滑过渡到图层改变之后的那个截图效果。如果我们知道如何对图层截图,我们就可以使用属性动画来自定义CATransition动画了。

CALayer有一个-renderInContenxt:方法,通过它可以将图层绘制到Core Graphics的上下文中捕获当前内容的图片;所以现在我们尝试这样的实现:对当前视图控制器View进行截图,然后在改变其背景色的时候对截图快速旋转并且淡出,以达到一种过渡的效果;具体的代码示例如下:

- (void)performAnimation{
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, YES, 0.0);
    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *coverImage = UIGraphicsGetImageFromCurrentImageContext();
    UIView *coverView = [[UIImageView alloc] initWithImage:coverImage];
    coverView.frame = self.view.bounds;
    [self.view addSubview:coverView];
    
    //使用自定义方法得到随机颜色(切换后的颜色)
    UIColor *randomColor = [UIColor randomColor];
    self.view.backgroundColor = randomColor;
    
    //使用UIView动画方法来代替属性动画(为了简化代码步骤)
    [UIView animateWithDuration:1 animations:^{
        CGAffineTransform transform = CGAffineTransformMakeScale(0.01, 0.01);
        transform = CGAffineTransformRotate(transform, M_PI_2);
        coverView.transform = transform;
        coverView.alpha = 0.0;
    } completion:^(BOOL finished) {
        [coverView removeFromSuperview];
    }];
}

自定义过渡动画的效果如下:
在这里插入图片描述
注意:-renderInContext:捕获了图层的图片和子图层,但是不能对子图层正确的处理变换效果,而且对视频和OpenGL内容也不起作用。但是使用CATransition,或者使用私有的截屏方式就没有这个限制了。

九、委托模式下的动画区分

对于CAAnimation而言,使用委托模式而不是一个完成块会带来一个问题,那就是设置多个动画时,无法在回调方法中区分。通常视图控制器本身会作为一个委托,但所有动画都会调用同一个回调方法,所以我们需要判断到底是哪个图层的动画调用;

首先,动画本身会作为一个参数传入委托的方法,也许你会认为可以在控制器中把动画存储为一个属性,然后在回调用比较,但实际上并不起作用,因为委托传入的动画参数是原始值的一个深拷贝,从而不是同一个值。最后,这里提供两种思路来解决这个问题:

思路1:唯一key参数
当使用-addAnimation:forkey:添加动画到图层时,对每个动画都关联一个唯一的键,这样就可以对每个图层循环所有键,然后调用animationForKey:来对比结果;

思路2:KVC(键-值-编码)协议
像所有NSObject子类一样,CAAnimation也遵循了KVC协议,就像一个NSDictionary一样允许我们随意设置键值对;于是我们可以使用setValue:forKey:-valueForKey:来存取属性,通过为对象创建一个键值对来判断区分动画;

验证上述两种思路的具体的代码使用如下:

@interface TestBacicAnimation2VC() <CAAnimationDelegate>

@property(nonatomic, strong) UIView *colorView;
@property(nonatomic, strong) UIView *opacityView;

@end

@implementation TestBacicAnimation2VC

#pragma mark - Life Cycle

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建显示颜色的图层
    UIView *colorView = [UIView new];
    colorView.frame = CGRectMake(50, 50, 100, 100);
    colorView.backgroundColor = [UIColor redColor];
    self.colorView = colorView;
    [self.view addSubview:self.colorView];
    
    //创建透明度视图
    UIView *opacityView = [UIView new];
    opacityView.frame = CGRectMake(50, 200, 100, 100);
    opacityView.backgroundColor = [UIColor blueColor];
    self.opacityView = opacityView;
    [self.view addSubview:self.opacityView];
}

- (IBAction)startAnimation:(UIButton *)sender{    
    //背景色颜色动画
    CABasicAnimation *animation1 = [CABasicAnimation animation];
    animation1.keyPath = @"backgroundColor";
    animation1.autoreverses = NO;
    animation1.duration = 1;
    animation1.repeatCount = 1;
    animation1.removedOnCompletion = NO;
    animation1.fillMode = kCAFillModeForwards;
    animation1.delegate = self;
    UIColor *randomColor = [UIColor randomColor];  //自定义获取随机色的方法
    animation1.toValue = (__bridge id _Nullable)(randomColor.CGColor);
    [animation1 setValue:@"animation_background" forKey:@"AnimationKey"];
    [self.colorView.layer addAnimation:animation1 forKey:@"key_backgroundColor"];

    //透明度动画
    CABasicAnimation *animation2 = [CABasicAnimation animation];
    animation2.keyPath = @"opacity";
    animation2.autoreverses = NO;
    animation2.duration = 5;
    animation2.repeatCount = 1;
    animation2.removedOnCompletion = NO;
    animation2.fillMode = kCAFillModeForwards;
    animation2.delegate = self;
    animation2.fromValue = @(1);
    animation2.toValue = @(0);
    [animation2 setValue:@"animation_opacity" forKey:@"AnimationKey"];
    [self.opacityView.layer addAnimation:animation2 forKey:@"key_opacity"];
}

//动画结束的代理:区分动画
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    //方法1:唯一key参数
    if([[self.colorView.layer animationForKey:@"key_backgroundColor"] isEqual:anim]){
     
    }
    if([[self.opacityView.layer animationForKey:@"key_opacity"] isEqual:anim]){

    }
     
    //方法2:KVC
    NSString *animationValue = [anim valueForKey:@"AnimationKey"];
    NSLog(@"animationValue:%@",animationValue);
    if([animationValue isEqualToString:@"animation_background"]){
         
    } else if([animationValue isEqualToString:@"animation_opacity"]){
         
    }
}

注意:使用唯一key参数这种方法,必须设置removeOnCompletion为NO,否则通过animaitonForKey:获取的CAAnimation对象为空对象无法进行比较。

十、虚拟属性

属性动画CAPropertyAnimationkeyPath实际上针对的是关键路径而不是一个键,这就意味着属性动画作用的对象可以子属性(即属性的属性)甚至虚拟属性;

那么什么是虚拟属性呢?举个例子来讲,CATransform3D实际上是一个结构体而非一个对象,所以它并不符合KVC相关属性,但是我们却可以使用transform.rotation来实现动画;这其实就是因为transform.rotation是一个CALayer可用于处理动画变换的虚拟属性;

1. 虚拟属性的作用

为了理解虚拟属性的用处,我们现在考虑这样一个动画:对一个物体实现旋转动画,由于CALayer并没有显式的给提供角度或者方向之类的属性,所以我们自然想到使用transform属性来实现动画,测试代码具体如下:

@interface TestBacicAnimation3VC()

@property(nonatomic, strong) UILabel *txtLabel;

@end

@implementation TestBacicAnimation3VC

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建测试虚拟属性的Label
    _txtLabel = [UILabel new];
    _txtLabel.frame = CGRectMake(50, 300, kDeviceWidth -100 , 50);
    _txtLabel.backgroundColor = [UIColor purpleColor];
    _txtLabel.font = [UIFont boldSystemFontOfSize:15];
    _txtLabel.textAlignment = NSTextAlignmentCenter;
    _txtLabel.text = @"测试虚拟属性";
    [self.view addSubview:_txtLabel];
}

- (IBAction)startAnimation:(UIButton *)sender{
    //步骤1:创建动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform”;  //代码1
    //步骤2:设定动画属性
    animation.autoreverses = NO;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 1;
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI * 2, 0, 0, 1)]; //代码2
    [_txtLabel.layer addAnimation:animation forKey:nil];
}

在此例中,我们把旋转角度从M_PI(180度)调整到M_PI*2(360度),对比两次动画会发现,txtLabel完全看不到旋转的动画效果;这是因为CATransform3D矩阵做了360度旋转其实适合0度是一样的,所以最后的值根本就没变;

这里就需要用到上述说到的虚拟属性了,为了旋转图层,我们可以针对于transform.rotation关键路径应用动画,而不是transform本身;现在将对上述代码进行修改如下:

//animation.keyPath = @"transform";  //代码1
animation.keyPath = @"transform.rotation”;

//animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI * 2, 0, 0, 1)]; //代码2
animation.byValue = @(M_PI * 2);

再来看动画的效果如下:
在这里插入图片描述
总结transform.rotation相比transfrom做动画的好处如下:

  1. 可以不通过关键帧,只一个步骤就实现旋转多于180度的动画;
  2. 可以使用相对值而不是绝对值旋转,设置byValue而不是toValue
  3. 可以不用创建CATransform3D,而是使用一个简单的数值来指定角度;
  4. 不会和transform.position或者transfrom.scale冲突(同样是使用关键路径来做独立的动画属性);

2. 虚拟属性原理

我们已经说过CATransform3D是一个结构体而非一个对象,所以transfrom.rotation其实是不存在的,我们不可以直接设置transform.rotation或者transform.scale

实际上,Core Animation是自动通过CAValueFunction计算的值来更新transform属性的,CAValueFunction将我们赋值虚拟属性transfom.rotation的浮点值转换成了真正能用于摆放图层的CATransform3D矩阵值;我们也可以通过设置CAPropertyAnimationvaluefunction属性来改变,这样我们自定义函数就会覆盖默认函数。

CAValueFuncation对于那些不能简单相加的属性(例如变换矩阵)做动画十分有用,但是此方法的实现细节是私有的,所以,目前我们并不能通过继承来自定义此方法;我们可以通过使用苹果已经提供的常量来改善动画(目前都是和变换矩阵的虚拟属性相关,所以没太多的应用场景了,因为这些属性都有了默认的实现方式)。

十一、在动画过程中取消动画

在使用动画的过程中,我们可能需要适时的移除不要的动画,否则就可能造成内存的泄漏问题;从图层中取消动画的方法有以下两种方式:

//方法1:取消指定动画 
/* Remove any animation attached to the layer for 'key'. */
- (void)removeAnimationForKey:(NSString *)key;

//方法2:移除所有动画
/* Remove all animations attached to the layer. */
- (void)removeAllAnimations;

关于移除动画的几点说明:

  1. 动画一旦被移除,图层的外观就立刻更新到当前的模型图层的值;
  2. 动画通常默认结束之后被自动移除,除非设置了removeCompletionNO;
  3. 动画若设置为结束之后不自动移除,那么我们在不需要的时候需手动移除,否则它会一直在内存中,直到图层被销毁;
- (void)viewDidLoad {
    [super viewDidLoad];
    //创建测试停止动画的Label
    _txtLabel = [UILabel new];
    _txtLabel.frame = CGRectMake(50, 200, kDeviceWidth -100 , 50);
    _txtLabel.backgroundColor = [UIColor purpleColor];
    _txtLabel.font = [UIFont boldSystemFontOfSize:18];
    _txtLabel.textAlignment = NSTextAlignmentCenter;
    _txtLabel.textColor = [UIColor whiteColor];
    _txtLabel.text = @"测试停止动画的Label";
    [self.view addSubview:_txtLabel];
    //添加开始动画的按钮
    [self.view addSubview:self.button];
    [self.button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.view).offset(-50);
        make.leading.equalTo(self.view).offset(60);
        make.trailing.equalTo(self.view).offset(-60);
        make.height.mas_equalTo(50);
    }];
}

- (void)onBtnClick:(UIButton *)btn {
    btn.selected = !btn.selected;
    if (btn.selected) {
        //停止动画
        [self.txtLabel.layer removeAnimationForKey:@"Animation_transform_rotation"];
        [self.button setTitle:@"开始动画" forState:UIControlStateNormal];
    }else{
        //开始动画
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"transform.rotation";
        animation.delegate = self;
        animation.duration = 5;
        animation.byValue = @(M_PI * 2);
        [self.txtLabel.layer addAnimation:animation forKey:@"Animation_transform_rotation"];
        [self.button setTitle:@"停止动画" forState:UIControlStateNormal];
    }
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"The animation stopped (finished:%@)",flag? @"YES" : @"NO");
}

测试取消动画效果图如下:
在这里插入图片描述
代码分析:
-animationDidStop:finished:方法中的flag参数表明了动画是自然结束还是被打断的;此例中通过停止按钮来终止动画会打印NO,自然完成动画时打印YES;

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值