iOS核心动画2——隐式动画和图层行为

前言:

《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的动画接口,更便捷强大,但内部仍然是通过CATransactionbeigncommit了一个事务。

    [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内时,_demoViewbackgroundColor属性的图层行为是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;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容