美文网首页iOS工作系列iOS动画技术文章
关于Core Animation动画(上)

关于Core Animation动画(上)

作者: 一不 | 来源:发表于2015-11-01 16:23 被阅读1509次

    1. UIView与CALayer

    对于UIViewCALayer,大家应该都很熟悉。通常我们了解到UIView是通过视图树的结构来组织起来的,实际上,UIView管理并维护了另一个图层树(即CALayer树),真正的在屏幕上显示与动画的实际上是CALayer对象。

    如果说CALayer是View的内部实现细节,那么为什么苹果要再封装一层UIView呢,UIView与CALayer的区别又是什么呢?
    UIView与CALayer最大的区别就是UIView可以处理用户的交互(如点击事件),而CALayer是不清楚具体的响应者链的,其不能够响应事件。
    将响应事件抽象到UIView中的原因,是为了与Mac OS公用一套底层代码(即layer层)。在Mac OS中有一个NSView的类,会用来处理一些与iOS不同的用户事件(比如键盘鼠标)。

    对于大部分的简单场景,UIView都可以满足我们的要求。那么研究CALayer有什么用呢?
    前面我们了解CALayer是无法像UIView那样处理触摸事件的,UIView也有一些没有暴露出来的CALayer的功能:

    • 阴影,圆角,边框
    • 3D变换(UIView只有2D变换)
    • 透明遮罩
    • 非矩形范围
    • 非线性动画
    • 其他很多功能,

    实际上,每个UIView都有一个CALayer实例的图层属性,我们可以通过view.layer来获取。
    CALayer有很多特殊的子类,可以实现很多不同的效果,大概可以看看CALayer具体有哪些子类。我们既可以改变UIView的CALayer类别,也可以为其添加不同的CALayer实例。这里暂时不讲太多,本章主要还是以动画为主。

    2. 隐式动画

    了解CALayer与UIView,我们可以来看看隐式动画,了解什么情况下,系统会自动产生动画。什么情况下,需要我们自己添加动画。

    隐式动画实际上是由事物来产生的,我们先看看事物的概念:

    2.1 事务

    事务实际上是Core Animation用来包含一系列属性动画集合的机制,任何对CALayer的属性改变都不会立刻发生变化,而是在事务提交后,用一个动画过度到新值。

    Core Animation在每个run loop周期中自动开始一次新的事务,任何在一次run loop循环中属性的改变都会集中起来,然后做一次0.25秒的动画。

    比如说,我们添加一个新的layer到视图上,改变其backGroundColor,会发现颜色不是瞬间就改变的,而是经过了0.25s(动画的默认时长)的时间渐变过来。

    //CALayer的隐式动画
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        //创建一个红色的layer
        _layer = [CALayer layer];
        _layer.frame = self.view.bounds;
        _layer.backgroundColor = [UIColor redColor].CGColor;
        [self.view.layer addSublayer:_layer];
    }
    
    - (IBAction)changeColor:(id)sender {
        //修改layer的颜色为黄色   此时,颜色是由红色渐变到黄色的
        _layer.backgroundColor = [UIColor yellowColor].CGColor;
    }
    
    上面就是隐式动画产生的原因,每个run loop中的会默认开启一个事务来完成CALayer的隐私动画。 需要注意的是,UIView所关联的layer,是禁用了隐式动画的。这个时候我们需要自己来实现动画:

    我们可以通过CATransaction的+begin和+commit来入栈或者出栈一个新的事务(也可以使用UIView的一些快捷方法,如+beginAnimations:context:和+animateWithDuration:animations:,他们本质上是一样的),在新建的事务中,我们可以修改一些动画相关的设定,比如说duration动画时间,而这些设定是只对当前事务有效的,不会影响到默认run loop中的事务。

    //对View做动画,需要包含在事物中
    [CATransaction begin];
    self.view.backgroundColor = [UIColor yellowColor];     //改变view颜色
    [CATransaction setAnimationDuration:1];             //修改本次事务的动画时间
    [CATransaction setCompletionBlock:^{                   //动画结束后回调
        NSLog(@"animation completed");
    }];
    [CATransaction commit];  //提交动画
    

    2.2 modelLayer与presentationLayer

    从上面的部分我们知道了CALayer的属性发生变化,会通过一段动画时间来渐变更新,而我们只是设置了backColor的起始值和结束值(由红色变为黄色)。那么是否有办法获取到动画中间状态的backColor呢?

    答案是可以的,我们需要了解2个概念,modelLayerpresentationLayer

    多数情况下,我们创建的一个CALayer实例,是指的modelLayer(可以称为数据图层)。我们对一个layer对象调用-modelLayer通常会返回-self。当一个layer的属性发生变化时,modelLayer的属性值立刻(动画开始前)就发生了变化,在上面的例子中,modelLayer的值是立刻从红色变为黄色的。

    而presentationLayer称为展现图层,它实际上是modelLayer的一份拷贝,表示了任意时刻屏幕显示的layer的真实值。也即动画过程中layer中间态的属性值,可以通过presentationLayer来获取。
    需要注意的是只有layer在第一次屏幕上显示时,presentationLayer才会被创建,在这之前-presentationLayer返回的是nil。

    总结一下

    1. 我们了解了CAlayer是UIView的底层实现,UIView可以处理一些用户触摸的事件,而CALayer则提供了更丰富的底层功能。
    2. 对于CALayer的属性改变,runloop会有一个默认的事物来进行隐式动画,而UIView则禁用掉了隐私动画,我们可以通过提交一个新的事物来对UIView的属性改变赋予一个可以控制的动画效果。
    3. 我们了解了modelLayer的属性是在修改后立刻就变为终值的,而presentationLayer则会经历一个渐变的修改过程,这对于一些交互性的动画很有帮助。

    后续可能会讲一些Core Animation其他的东西,比如说显示动画,渲染树之类

    转载请注明出处,我的博客: luoyibu.com

    相关文章

      网友评论

      • syyjay:不错
      • 921daab44a8c:讲的很细致,学习了
      • e1f9f5a0ea37:涨姿势了
      • 刘勇虎://对View做动画,需要包含在事物中
        [CATransaction begin];
        self.view.backgroundColor = [UIColor yellowColor]; //改变view颜色
        [CATransaction setAnimationDuration:1]; //修改本次事务的动画时间
        [CATransaction setCompletionBlock:^{ //动画结束后回调
        NSLog(@"animation completed");
        }];
        [CATransaction commit]; //提交动画


        为什么这一部分,我的视图为什么没有变色? :sweat:
        一不:@CBTig 其他地方的代码没有看到。view是不是被你新加的layer挡住了?
        刘勇虎:@一不 代码是这样的--

        - (IBAction)changeColor:(UIButton *)sender {
        sender.selected = !sender.selected;

        if (sender.selected) {

        [CATransaction begin];


        self.view.backgroundColor = [UIColor yellowColor];

        // _layer.backgroundColor = [UIColor yellowColor].CGColor;

        [CATransaction setAnimationDuration:10.0];

        [CATransaction setCompletionBlock:^{
        NSLog(@"animation completed");
        }];



        [CATransaction commit];
        //
        }else{

        self.view.backgroundColor = [UIColor redColor];

        // _layer.backgroundColor = [UIColor redColor].CGColor;
        }


        }
        一不:@CBTig 把你vc的代码都贴出来看看?

      本文标题:关于Core Animation动画(上)

      本文链接:https://www.haomeiwen.com/subject/qycqhttx.html