前言:
《iOS Core Animation Advanced Techinques》学习笔记之:
iOS核心动画1——认识图层CALayer
隐式动画:
当我们改变CALayer
的很多属性值,它的结果并不是一下子在屏幕上显示出来的,而是有个过渡动画。这便是所谓的隐式动画,我们并未为之加Core Animation
动画特效,但它却默认有动画效果。
我们仅是改变了某属性的值,那Core Animation
是如何判断动画类型和持续时间呢?实际上动画类型由图层行为决定,持续时间则由事务所设置的时间决定。
何谓“事务”?
事务CATransaction:
事务实际上是Core Animation用来包含一系列属性动画集合的机制,任何用指定事务去改变可以做动画的图层属性都不会立刻发生变化,而是当事务一旦提交的时候开始用一个动画过渡到新值。
记得数据库操作中也有“事务”的概念,它其实是并发控制的基本单位,事务中的这些操作,要么都执行,要么都不执行,它们像被事务“捆绑”在一起。Core Animation
中的事务CATransaction
则用于将属性的变化“捆绑”在一起,用于动画的处理。
在隐式动画中,系统会自动创建隐式事务,然后在run loop
中提交。有人把这叫隐式事务,当然相对的,也可以显式地开启beign
一个事务,然后改变可动画属性的值,最后提交commit
。
[CATransaction begin];
[CATransaction setAnimationDuration:2.f];
[CATransaction setCompletionBlock:^{
NSLog(@"finsh");
}];
_customLayer.backgroundColor = RandomColor.CGColor;
[CATransaction commit];
事务的这种begin
&commit
模式,在UIView
层的动画接口也有类似的模式。之所以类似,是因为UIView
内部仍然是通过CATransaction
来设置动画的。后来苹果在UIView
中增加了一系列基于block
的动画接口,更便捷强大,但内部仍然是通过CATransaction
来beign
和commit
了一个事务。
[UIView beginAnimations:@"btnBgColor" context:nil];
[UIView setAnimationDuration:2.f];
[UIView setAnimationRepeatCount:2];
[btn setBackgroundColor:RandomColor];
[UIView commitAnimations];
假如我们想让CALayer
的背景色更换动画结束后想让该图层变大。则我们需要修改事务完成块completionBlock:
中的代码,改变该图层的bounds
属性。但是结果并不如意。背景色更换动画是正常的,但是bounds
的变化要快得多,并不是2秒。
这其实是合理的,这是因为完成块是在事务提交并出栈之后才被执行的。此时修改CALayer
的属性是在另一个隐式的事务中执行的,所以动画持续时间是默认的0.25秒。
图层行为
上面我们已经在CALayer
的隐式动画中说了,当某属性被改变时它的动画类型是由“图层行为”来决定的。我们再来思考一下这个问题:为什么当我们仅改变某个属性的值时,它竟然会自动的做出相应的动画来。当我们修改颜色时,它会有颜色渐变的过渡动画;当我们修改尺寸时,它会有尺寸的渐变动画,等等。
既然动画类型是由“图层行为”来决定的,那图层行为是什么呢?
简单的说,把改变属性时CALayer
自动应用的动画称作“行为”。
当某属性被修改时,图层会查找该属性对应的行为,即相应该作出的动画类型是什么。用代码来说的话就是查找该属性对应的一个实现了CAAction
协议的对象。具体步骤是这样的:
首先图层检查自己是否有
CALayerDelegate
协议的代理,并且检查是否实现了-actionForLayer:forKey:
方法。如果有,则直接调用,并返回结果。即该属性对应的动画行为,一个实现CAAction
协议的对象;
- (nullable id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event;
若没有代理,或代理类未实现上面代理方法,图层接着检查自己的actions
属性,它是一个以属性名为key
,以图层行为为value
的字典。若在字典中查得改属性对应的动画行为,则返回;
@property(nullable, copy) NSDictionary<NSString *, id<CAAction>> *actions;
若在actions
字典中未查得该属性的行为,则图层继续在其属性style
字典中查找。
@property(nullable, copy) NSDictionary *style;
若在style
字典中仍未查得该属性对应的行为,那么图层将会直接调用定义了每个属性的标准行为的+ defaultActionForKey:
方法。
+ (nullable id<CAAction>)defaultActionForKey:(NSString *)event;
经过以上这么一轮检索,要么返回一个实现了CAAction
协议的对象,图层通过该对象完成相应的动画;要么什么也没查得,返回nil
,此时就不会有动画发生。
以上便是CALayer
的属性隐式动画发生的内在机理。
但是!我们注意到当我们直接修改UIView
自关联的CALayer
的属性值时,界面立马变化,没有隐式动画。但是当我们在一个动画块中改变视图关联的layer
的某属性的值时,却是有动画效果的。这是为什么呢?
这是因为UIKit
有意地禁用了隐式动画,但在UIKit
显式需要动画的地方又开启了动画。而禁用和开启所依据的原理就是上面所梳理的检索图层行为的机理。每个UIView
对其自关联的layer
来说是代理,并且提供了-actionForLayer:forKey:
方法的实现,当不在一个动画block中时,UIView
对所有的图层行为返回nil
,但是在动画block范围内,它就返回一个非空值。
从下面的例子可以看到。当在动画block内时,_demoView
的backgroundColor
属性的图层行为是CABasicAnimation
动画。
- (void)btnClick:(UIButton *)btn
{
NSLog(@"--outSide:%@",[_demoView.layer actionForKey:@"backgroundColor"]);
[UIView animateWithDuration:2.f animations:^{
NSLog(@"--inSide:%@", [_demoView.layer actionForKey:@"backgroundColor"]);
}];
}
2017-03-03 00:33:40.954 0213Demo[63689:50167586] --outSide:(null)
2017-03-03 00:33:40.954 0213Demo[63689:50167586] --inSide:<CABasicAnimation: 0x60800003f380>
既然我们现在明白了图层查找动画行为的原理,那我们在面对UIView
自关联的layer
时,可以重写它实现的代理方法-actionForLayer:forKey:
来自定义动画的行为;当我们面对自己创建的layer
时,我们既可以实现该代理方法来自定义动画的行为,也可以提供一个自定义的actions
字典来自定义动画的行为。
- (void)viewDidLoad {
[super viewDidLoad];
_customLayer = [CALayer layer];
_customLayer.position = self.contentView.center;
_customLayer.bounds = CGRectMake(0, 0, 100, 100);
_customLayer.backgroundColor = [UIColor blueColor].CGColor;
_customLayer.delegate = self;
[self.contentView.layer addSublayer:_customLayer];
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
btn.center = CGPointMake(self.contentView.center.x, self.contentView.center.y+150);
btn.bounds = CGRectMake(0, 0, 100, 35);
[btn setTitle:@"改变背景色" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:btn];
}
- (void)btnClick:(UIButton *)btn{
_customLayer.backgroundColor = RandomColor.CGColor;
}
- (nullable id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event{
CATransition *transition = [CATransition animation];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromBottom;
return transition;
}
或者这样:
- (void)viewDidLoad {
[super viewDidLoad];
_customLayer = [CALayer layer];
_customLayer.position = self.contentView.center;
_customLayer.bounds = CGRectMake(0, 0, 100, 100);
_customLayer.backgroundColor = [UIColor blueColor].CGColor;
CATransition *transition = [CATransition animation];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromBottom;
_customLayer.actions = @{@"backgroundColor":transition};
[self.contentView.layer addSublayer:_customLayer];
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
btn.center = CGPointMake(self.contentView.center.x, self.contentView.center.y+150);
btn.bounds = CGRectMake(0, 0, 100, 35);
[btn setTitle:@"改变背景色" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:btn];
}
- (void)btnClick:(UIButton *)btn{
_customLayer.backgroundColor = RandomColor.CGColor;
}
呈现和模型:
CALayer
属性其实有两种值。一种就是“模型值”,另一种叫“呈现值”。当你修改某属性的值时,模型值是立马发生变化的,它代表的是改变后的值。中间隔了一段动画,每个时刻该属性在UI
上呈现的值的不同的,这就是该属性的“呈现值”。
假如在动画过程中,想知道各个时刻图层所在的位置,或者想处理对图层的用户交互,则应当获取该图层的“呈现值”,因为它是动画过程中在UI
上所真实呈现的值。
CALayer
分别提供了接口方法:
- (nullable instancetype)presentationLayer;
- (instancetype)modelLayer;