ios动画原理 modelLayer和presentationLayer以及点击交互

我们知道,iOS的动画,和其对应的layer有关。

之前在开发的过程中碰到一个问题,那就是,在一个视图的动画过程中,这个视图view和Layer的frame是怎么变化的?

1 动画过程中frame的变化

为了研究动画过程中,view和Layer的frame变化,做了简单的动画打印测试,效果如下:

image.png

由结果可知,在UIView动画的回调中添加打印,只会打印一次,且打印的是最终的view和Layer 的位置,这显然不是想要的结果,所以,在动画的回调block中打印是不能实现的;

1.1 添加KVO监听frame的变化

在动画之前,对视图view和layer分别添加kvo监听其frame的变化,看是否能在动画过程中,视图的frame发生变化,从而打印出对应的frame:

image.png

如上图打印结果,添加kvo监听,对应的view和layer,只监听到了修改view的一次frame的变化,添加断点,监听的回调也只走一次;

??问题:
1.view的frame变化为什么只有一次?动画的过程中,view的frame不变?
2.为什么监听不到layer 的frame的变化? 最终通过第一次的实验,layer的frame是发生了变化的啊?

1.2 添加CADisplayLink 打印frame的变化

带着1.1中的两个问题,回想到view动画的实现原理,动画的过程其实是一帧一帧显示的,所以,每一帧对应的view或者layer的位置是不断变化的;

所以应该尝试打印在每一帧的显示时,view和layer的frame;

而这恰好可以使用系统自带的CADisplayLink,它的回调频率,和设备的刷帧是一致的,添加测试如下:


image.png

注意:添加一个dispatch_after,是为了避免一直打印,不方便查看打印结果,没有其他作用;

打印发现,view和layer的frame还是每次打印的最终位置的frame;

由此,证明了动画过程

view的frame只改变的一次,直接改到了最终的frame

而动画的view的layer,确实是和动画相关的,难道它的frame也只改变了一次?

2 关于modelLayer和presentationLayer

打开CALayer的头文件,发现了其下两个属性:


/* Returns a copy of the layer containing all properties as they were
 * at the start of the current transaction, with any active animations
 * applied. This gives a close approximation to the version of the layer
 * that is currently displayed. Returns nil if the layer has not yet
 * been committed.
 *
 * The effect of attempting to modify the returned layer in any way is
 * undefined.
 *
 * The `sublayers', `mask' and `superlayer' properties of the returned
 * layer return the presentation versions of these properties. This
 * carries through to read-only layer methods. E.g., calling -hitTest:
 * on the result of the -presentationLayer will query the presentation
 * values of the layer tree. */

 / *在-presentationLayer方法的结果上调用时,返回
 *具有当前模型值的基础层。当调用
 *非表示层,返回接收者。通话结果
 *产生展示的交易后的此方法
 *图层已完成是不确定的。 * /


/ *返回包含所有属性的图层的副本
 *在当前交易开始时,带有任何活动的动画
 *适用。这非常接近该图层的版本
 *当前显示。如果图层尚未返回nil
 *已承诺。
 *
 *尝试以任何方式修改返回的图层的效果是
 *未定义。
 *
 *返回的`sublayers',`mask'和`superlayer'属性
 *层返回这些属性的表示形式。这个
 *进行只读层方法。例如,调用-hitTest:
 * -presentationLayer的结果将查询演示文稿
 *层树的值。 * /
 
- (nullable instancetype)presentationLayer;

/* When called on the result of the -presentationLayer method, returns
 * the underlying layer with the current model values. When called on a
 * non-presentation layer, returns the receiver. The result of calling
 * this method after the transaction that produced the presentation
 * layer has completed is undefined. */

 / *在-presentationLayer方法的结果上调用时,返回
 *具有当前模型值的基础层。当调用
 *非表示层,返回接收者。通话结果
 *产生展示的交易后的此方法
 *图层已完成是不确定的。 * /

- (instancetype)modelLayer;

将回调中的layer,换成了presentationLayer,打印结果如下:

结果1
结果2

打印发现了一开始想要的结果,原来直接打印view的frame之变化一次是对的,真正的发生动画的是一个叫presentationLayer的东西;

动画的整个过程其实经历了三个树状结构,才显示到了屏幕上:模型树-->呈现树-->渲染树,如图:

image.png

通常,我们操作的是模型树;

在重绘周期最后,我们会将模型树相关内容(层次结构、图层属性和动画)序列化,通过IPC传递给专门负责屏幕渲染的渲染进程。渲染进程拿到数据并反序列化出树状结构--呈现树。

这个呈现图层实际上是模型图层的复制,但是它的属性值代表了在任何指定时刻当前外观效果。换句话说,你可以通过呈现图层的值来获取当前屏幕上真正显示出来的值

我们可以通过CALayer的presentationLayer方法来访问对应的呈现树图层。

注意:呈现图层仅仅当图层首次被提交(就是首次第一次在屏幕上显示)的时候创建,所以在那之前调用-presentationLayer将会返回nil。

–modelLayer方法: 在呈现图层上调用–modelLayer将会返回它正在呈现所依赖的CALayer。通常在一个图层上调用-modelLayer会返回–self(实际上我们已经创建的原始图层就是一种数据模型)。

一个移动的图层是如何通过数据模型呈现的:

image.png

大多数情况下,你不需要直接访问呈现图层,你可以通过和模型图层的交互,来让Core Animation更新显示。

两种情况下presentationLayer呈现图层会变得很有用

  • 同步动画,
  • 动画过程中处理用户交互。

当模型树上带有动画特征时,提交到渲染进程后,渲染进程会根据动画特征,不断修改呈现树上的图层属性,并同时不断的在屏幕上渲染出来,这样我们就看到了动画。

2.1 模型树与呈现树关系的比喻

在CALayer内部,它控制着两个属性:presentationLayer(以下称为P)和modelLayer(以下称为M)。

P只负责显示,M只负责数据的存储和获取

我们对layer的各种属性赋值比如frame,实际上是直接对M的属性赋值;

而P将在每一次屏幕刷新的时候回到M的状态。

比如此时M的状态是1,P的状态也是1,然后我们把M的状态改为2,那么此时P还没有过去,也就是我们看到的状态P还是1,在下一次屏幕刷新的时候P才变为2。而我们几乎感知不到两次屏幕刷新之间的间隙,所以感觉就是我们一对M赋值,P就过去了。

P就像是瞎子,M就像是瘸子,瞎子背着瘸子,瞎子每走一步(也就是每次屏幕刷新的时候)都要去问瘸子应该怎样走(这里的走路就是绘制内容到屏幕上),瘸子没法走,只能指挥瞎子背着自己走。

重点: 动画完成回到原地

可以简单的理解为:一般情况下,任意时刻P都会回到M的状态。

而当一个CAAnimation(以下称为A)加到了layer上面后,A就把M从P身上挤下去了。
现在P背着的是A,P同样在每次屏幕刷新的时候去问他背着的那个家伙,A就指挥它从fromValue到toValue来改变值。而动画结束后,A会自动被移除,这时P没有了指挥,就只能大喊“M你在哪”,M说我还在原地没动呢,于是P就顺声回到M的位置了。

这就是为什么动画结束后我们看到这个视图又回到了原来的位置,是因为我们看到在移动的是P,而指挥它移动的是A,M永远停在原来的位置没有动,动画结束后A被移除,P就回到了M的怀里。

动画结束后,P会回到M的状态(当然这是有前提的,因为动画已经被移除了,我们可以设置fillMode来继续影响P),但是这通常都不是我们动画想要的效果。我们通常想要的是,动画结束后,视图就停在结束的地方,并且此时我去访问该视图的属性(也就是M的属性),也应该就是当前看到的那个样子。按照官方文档的描述,我们的CAAnimation动画都可以通过设置modelLayer到动画结束的状态来实现P和M的同步。

2.2 动画的实现方式

在iOS中,实现动画的方式主要分两大类:

  • CoreAnimation动画
  • 非CoreAnimation动画。

CoreAnimation动画

CoreAnimation动画,即基于事务的动画,是最常见的动画实现方式。动画执行者是专门负责渲染的渲染进程,操作的是呈现树 presentationLayer。我们应该尽量使用CoreAnimation来控制动画,因为CoreAnimation是充分优化过的:

1、更高效的绘制

基于Layer的绘图过程中,CoreAnimation通过硬件操作位图(变换、组合等),产生动画的速度比软件操作的方式快很多。

基于View的绘图过程中,view被改动时会触发的drawRect:方法来重新绘制位图,但是这种方式需要CPU在主线程执行,比较耗时。而CoreAnimation则尽可能的操作硬件中已缓存的位图,来实现相同的效果,从而减少了资源损耗。

2、更高效的动画

在动画过程中,CoreAnimation会通过硬件来一帧一帧的绘制。你所做的就是指定动画的起点和终点,其他的都让CoreAnimation来做。当然你也可以自定义动画参数,否则CoreAnimation会使用合适的默认值。

非CoreAnimation动画

非CoreAnimation动画执行者是当前进程,操作的是模型树 modelLayer。常见的有定时器动画和手势动画。定时器动画是在定时周期触发时修改模型树的图层属性;手势动画是手势事件(比如UIScrollView的didScrollView)触发时修改模型树的图层属性。两者都能达到视图随着时间不断变化的效果,即实现了动画。

非CoreAnimation动画动画过程中实际上不断改动的是模型树,而呈现树仅仅成了模型树的复制品,状态与模型树保持一致。整个过程中,主要是CPU在主线程不断调整图层属性、布局计算、提交数据,没有充分利用到CoreAnimation强大的动画控制功能。

以上部分关于layer的描述摘自文章链接

3 动画过程中的点击交互处理

如果你想让你做动画的图层响应用户输入

你可以使用-hitTest:方法来判断指定图层是否被触摸,这时候对呈现图层而不是模型图层调用-hitTest:会显得更有意义,因为呈现图层代表了用户当前看到的图层位置,而不是当前动画结束之后的位置。


- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.testview = [[UIView alloc]initWithFrame:CGRectMake(0, 100, 50, 30)];
    self.testview.backgroundColor = [UIColor orangeColor];
    self.testview.userInteractionEnabled = NO;
    [self.view addSubview:self.testview];
    [UIView animateWithDuration:3.0 animations:^{
        self.testview.frame = CGRectMake(300, 100, 50, 30);
    }];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];
    
    //方案一
//    if (CGRectContainsPoint(self.testview.layer.presentationLayer.frame, point)) {
//        [self clickPresntationLayer];
//    }
    
    //方案二
    if ([self.testview.layer.presentationLayer hitTest:point] != nil) {
        [self clickPresntationLayer];
    }
}

- (void)clickPresntationLayer{
    self.testview.backgroundColor = [UIColor colorWithRed:(arc4random()%255/255.0) green:(arc4random()%255/255.0) blue:(arc4random()%255/255.0) alpha:1.0];
}

方案一:直接使用了CGRectContainsPoint(CGrect rect, CGPoint point);方法,该方法返回一个BOOL值,判断point是否在rect内部,刚好可以传染presentationLayer的frame和当前点击的point;

image.png

方案二:直接使用了hitTest:(CGPoint)p;方法,该方法返回一个CALayer对象,如果点击的point在其内部,返回一个layer对象;

另外,对于CALayer的另一个方法:

  • (BOOL)containsPoint:(CGPoint)p;

做了尝试发现不管用,梳理一下,当前的point在self.view上,而这个方法的point是在layer内部的,所以可能不适用。

image.png

之前面试时有碰到问题,在回到UIView和CALayer的区别时:

有回答CALayer不能响应点击事件:但现在来看,通过hitTest方法,确实是可以响应点击事件的。

你可能感兴趣的:(ios动画原理 modelLayer和presentationLayer以及点击交互)