前言


本次分享将从以下方面进行展开:

  1. 曾被面试官问倒过的问题:层与视图的关系
  2. CALayer类介绍及层与视图的关系
  3. CAShapeLayer类介绍
  4. UIBezierPath贝塞尔曲线讲解
  5. CoreAnimation之动画子类介绍
  6. CATransitionAnimation类实现各种过滤动画

关于Core AnimationiOS系统中的关系图如下:


可以看出,Core Animation是相对上层的封装,介于UIKitCore GraphicsOpenGL/OpenGL ES之间。最底下还有一个Graphics Hardware,就是硬件了!!!

层与视图的关系


我们先看看WindowLayer之间的关系:

 

这个图告诉我们,层是基于绘画模型实现的,层并不会在我们的app中做什么事,实际上是层只是捕获app所提供的内容,并缓存成bitmap,当任何与层关联的属性值发生变化时,Core Animation就会将新的bitmap传给绘图硬件,并根据新的位图更新显示。

UIViewiOS系统中界面元素的基础,所有的界面元素都是继承自UIView。它本身完全是由CoreAnimation来实现的。它真正的绘图部分,是由一个CALayer类来管理。UIView本身更像是一个CALayer的管理器,访问它的跟绘图和跟坐标有关的属性,例如framebounds等,实际上内部都是在访问它所包含的CALayer的相关属性。

提示:layer-based drawing不同于view-based drawing,后者的性能消耗是很高的,它是在主线程上直接通过CPU完成的,而且通常是在-drawRect:中绘制动画。

UIView与CALayer的联系

我们看看UIViewlayer之间的关系图:

我们可以看到,一个UIView默认就包含一个layer属性,而layer是可以包含sublayer的,因此形成了图层树。从此图可以看出这两者的关系:视图包含一个layer属性且这个layer属性可以包含很多个sublayer

有人说UIView就像一个画板,而layer就像画布,一个画板上可以有很多块画布,但是画布不能有画板。

UIView与CALayer的主要区别

  1. UIView是可以响应事件的,但是CALayer不能响应事件
  2. UIView主要负责管理内容,而CALayer主要负责渲染和呈现。如果没有CALayer,我们是看不到内容的。
  3. CALayer维护着三个layer tree,分别是presentLayer TreemodeLayer TreeRender Tree,在做动画的时候,我们修改动画的属性,其实是修改presentLayer的属性值,而最终展示在界面上的其实是提供UIViewmodelLayer

官方说明了UIViewCALayer的联系:

Layers are not a replacement for your app’s views—that is, you cannot create a visual interface based solely on layer objects. Layers provide infrastructure for your views. Specifically, layers make it easier and more efficient to draw and animate the contents of views and maintain high frame rates while doing so. However, there are many things that layers do not do. Layers do not handle events, draw content, participate in the responder chain, or do many other things. For this reason, every app must still have one or more views to handle those kinds of interactions.

说说CALayer


我们首先得明确LayeriOS系统上的坐标系起点是在左上角的,而在OS X系统上是左下角的:

 

笔者对Layer相关的属性和方法画了这么一张图:

看看官方关于Layer Tree的说明:

关于这一节,请阅读iOS CALayer解读,文章末尾有Demo可以下载运行看效果。

说说UIBezierPath


关于这一节,请阅读iOS UIBezierPath解读,文章末尾有Demo可以下载运行看效果。

说说CAShapeLayer


关于这一节,请阅读iOS CAShapeLayer解读,文章末尾有Demo可以下载运行看效果。

Core Animation介绍


我们在开发中常见的动画:

笔者将Core Animation的关系图及相关属性、方法说明都通过该图来表达:

如果我们要改变动画的行为,我们可以实现CAAction协议的方法,像这样:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
- (id<CAAction>)actionForLayer:(CALayer *)theLayer
                        forKey:(NSString *)theKey {
    CATransition *theAnimation=nil;
 
    if ([theKey isEqualToString:@"contents"]) {
        theAnimation = [[CATransition alloc] init];
        theAnimation.duration = 1.0;
        theAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        theAnimation.type = kCATransitionPush;
        theAnimation.subtype = kCATransitionFromRight;
    }
    return theAnimation;
}

说说Core Animation的更多相关文章

  1. iOS 图形图像动画 Core Animation

    //Core Animation #define WeakSelf __weak __typeof(self) weakSelf = self #define StrongSelf __strong ...

  2. iOS开发之Core Animation

    在IOS中如果使用普通的动画则可以使用UIKit提供的动画方式来实现,如果想实现更复杂的效果,则需要使用Core Animation了. 在Core Animation中我们经常使用的是 CABasi ...

  3. 老司机带你走进Core Animation

    为什么时隔这么久我又回来了呢? 回来圈粉. 开玩笑的,前段时间ipv6被拒啊,超级悲剧的,前后弄了好久,然后需求啊什么的又超多,所以写好的东西也没有时间整理.不过既然我现在回来了,那么这将是一个井喷的 ...

  4. IOS Core Animation Advanced Techniques的学习笔记(五)

    第六章:Specialized Layers   类别 用途 CAEmitterLayer 用于实现基于Core Animation粒子发射系统.发射器层对象控制粒子的生成和起源 CAGradient ...

  5. IOS Core Animation Advanced Techniques的学习笔记(四)

    第五章:Transforms   Affine Transforms   CGAffineTransform是二维的     Creating a CGAffineTransform   主要有三种变 ...

  6. IOS Core Animation Advanced Techniques的学习笔记(一)

    转载. Book Description Publication Date: August 12, 2013 Core Animation is the technology underlying A ...

  7. 关于Core Animation(转载部分内容)

    读者在浏览技术博客的时候,看到一篇关于Core Animation的介绍,觉得挺有用的,想分享给大家.原作者不知道是谁,嘿,所以就先不标注了,如有冒犯敬请原谅.不过笔者从中摘录部分内容分享一下. 其中 ...

  8. iOS Core Animation之CALayer心得

    使用CALayer的mask实现注水动画效果 Core Animation一直是iOS比较有意思的一个主题,使用Core Animation可以实现非常平滑的炫酷动画.Core animtion的AP ...

  9. iOS——Core Animation 知识摘抄(四)

    原文地址http://www.cocoachina.com/ios/20150106/10840.html 延迟解压 一旦图片文件被加载就必须要进行解码,解码过程是一个相当复杂的任务,需要消耗非常长的 ...

  10. iOS——Core Animation 知识摘抄(三)

    原文地址:http://www.cocoachina.com/ios/20150105/10827.html CAShapeLayer CAShapeLayer是一个通过矢量图形而不是bitmap来绘 ...

随机推荐

  1. vs调试有时能进去后台,有时不能进去

    前两天做项目时,遇到调试时有时候能进后台,有时候直接就弹出运行结果,反复查找原因,最后发现,原来是页面输出缓存的原因,我在web页面用到了< OutputCache Duration=" ...

  2. mysql开启/关闭 update delete 安全模式

    在使用mysql执行update的时候,如果不是用主键当where语句,会报如下错误,使用主键用于where语句中正常. 异常内容:Error Code: 1175. You are using sa ...

  3. MFC下对串口的操作以及定时器的调用

    最近研究了一下MFC下对串口的操作,测试了一下对设备的读写. 1.打开串口 GetDlgItem(IDC_BUTTON_OPEN)->EnableWindow(FALSE); m_hComm = ...

  4. Augular JS里的各种ng

    Augular JS里的各种ng- 正文: 1.ng-disabled="一种状态:该状态下不可用"例如: %button.btn.btn-2(ng-disabled=" ...

  5. HttpWebRequest 抓取页面异常处理办法

    抓取页面异常处理办法 public static string GetHtmlTest(string URI) { string fullhtml = null; while (true) { try ...

  6. SQL 优化案例 1

    create or replace procedure SP_GET_NEWEST_CAPTCHA( v_ACCOUNT_ID in VARCHAR2, --接收短信的手机号 v_Tail_num i ...

  7. Listview的OnScrollListener的滑动监听实现分页加载

    //---------------主布局文件---------------------------- <ListView android:layout_width="fill_pare ...

  8. HDU 3038 How Many Answers Are Wrong (并查集)---并查集看不出来系列-1

    Problem Description TT and FF are ... friends. Uh... very very good friends -________-bFF is a bad b ...

  9. [原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。

    window.onload = function () { document.getElementById('btn').onclick = function () {                 ...

  10. [原]左右的移动&lt;&lt;&gt;&gt;&lt;&gt;jQuery的实现

    $(function () {             $('#toAllLeft').click(function () {                 $('#se1 option').app ...