一.iOS核心动画 - 关于图层与视图

引言

Core Animation听起来会让人误以为它只是用来做动画的,但是事实上它是从Layer Kit库演变而来的,其中做动画的功能只是Core Animation特性的一小部分。

Core Animation是一个复核引起,它的作用就是尽可能快地组合屏幕上不同的显示内容,这些内容被分解成独立的图层,存在一个叫做图层树的体系当中。于是这个树形成了UIKit以及在iOS应用程序当中你所能在屏幕看见的一切的基础。

介绍

在日常开发中我们对视图的概念已经比较熟悉了。一个视图就是显示在屏幕上的一个矩形块,它可以拦截点击触摸等用户输入的事件。视图在层级关系中可以嵌套,一个视图可以管理它的所有子视图的位置。

我们创建一个非常简单例子来说明视图的层级关系,代码如下:

        let view = UIView(frame: CGRect(x: 100, y: 100, width: 150, height: 150))view.backgroundColor = .redself.view.addSubview(view)let subGreenView = UIView(frame: CGRect(x: 25, y: 10, width: 50, height: 50))subGreenView.backgroundColor = .greenview.addSubview(subGreenView)let subBlueView = UIView(frame: CGRect(x: 25, y: 75, width: 50, height: 50))subBlueView.backgroundColor = .blueview.addSubview(subBlueView)

视图显示如下,两个subView嵌套在红色view当中:

在iOS当中,所有的视图都从UIView这个基类派生出来的,UIView可以处理触摸事件,可以支持基于Core Graphics绘图,可以做仿射变换,或者简单的滑动渐变的动画。

图层CALayer在概念上和UIView类似,同样也是一些被层级关系树管理的矩形块,同样也可以用于显示图片文本或者背景颜色,同样也可以管理子图层的位置。它和UIView最大的不同就是CALayer不处理用户的交互。

UIView和CALayer的层级关系

每一个UIView都有一个CALayer实例图层,视图的职责就是创建和管理这个图层,以确保当子视图在层级关系中添加或者被移除的时候,他们关联的图层也同样对应在层级关系树当中有相同的操作。

事实上这些图层CALayer才是真正用来在屏幕上显示和做动画的,UIView仅仅是对它进行了封装,并提供了可以处理用户交互的能力。

但是为什么会这样设计呢?为什么会提供两个平行的层级关系呢?

原因就在于要做职责分离,这样也可以避免许多重复代码。在iOS和Mac OS两个平台上,事件和用户交互有很多地方不同,基于多点触控的用户界面和基于鼠标键盘有着本质的区别。

绘图,布局和动画,相比之下就是类似Mac笔记本和桌面系列一样应用于iPhone和iPad触屏的概念。把这种功能的逻辑分开并应用到独立的Core Animation框架,苹果就能够在iOS和Mac OS之间共享代码,使得对苹果自己的OS开发团队和第三方开发者去开发两个平台的应用更加便捷。

图层的作用

下面我们来全面的了解一下CALayer,苹果虽然为我们提供了一些优美简洁的UIView接口,可以让我们间接地使用,让动画变得简单了许多。但是这种简单就不可避免地带来了一些灵活上的缺陷。如果你想实现一些UIView为实现的接口功能,就不得不更加全面的了解和使用Core Animation。

下面列举一些视图不具备,属于图层的特有功能:

  • 阴影,圆角,带颜色的边框
  • 3D变换
  • 非矩形图像
  • 遮罩
  • 多级非线性动画

图层的使用

我们来创建一个非常简单的项目,一共包含两个图层,一个白色的CALayer,一个红色的CALayer,代码如下。

            //白色let whiteLayer = CALayer()whiteLayer.frame = CGRect(x: 100, y: 100, width: 100, height: 100)whiteLayer.backgroundColor = UIColor.white.cgColorview.layer.addSublayer(whiteLayer)// 红色let redLayer = CALayer()redLayer.frame = CGRect(x: 30, y: 30, width: 40, height: 40)redLayer.backgroundColor = UIColor.red.cgColorwhiteLayer.addSublayer(redLayer)

显示如下:

我们在白色图层上面添加了一个红色图层,当然还可以添加更多的图层,同样我们还可以在红色的图层上也添加更多的图层,这样就会形成一个树状的结构,通常就是我们常说的图层树。

总结

本篇博客主要阐述了图层的树状结构,并且自己创了CALayer并把它添加到了图层树中。

通过上面的介绍我们已经对Core Animation框架的基础有了初步的了解,下面的博客我们介绍到与图层相关联的图片,已经Core Animation提供的操作显示的一些特性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/25938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python | Leetcode Python题解之第143题重排链表

题目: 题解: class Solution:def reorderList(self, head: ListNode) -> None:if not head:returnmid self.middleNode(head)l1 headl2 mid.nextmid.next Nonel2 self.reverseList(l2)self.mergeList(l1, l2)def middleNode(self, head: ListNo…

18.2 HTTP服务器-处理函数、响应404错误

1. 处理函数 处理来自客户端的请求,并回之以特定的响应,这是处理函数的主要任务。在处理函数中,我们通常会完成如下工作: 验证请求路径 http.Request.URL.Pathhttp.NotFound(...) 当请求没有对应的处理函数时,返回4…

Vue3【十六】TS中的接口、泛型,自定义类型

Vue3【十六】TS中的接口、泛型&#xff0c;自定义类型 TS中的接口、泛型&#xff0c;自定义类型 案例截图 目录结构 代码 app.vue <template><div class"app"><h1>你好世界! 我是App根组件</h1><Person /></div> </templat…

OpenAI官方Prompt工程指南详解!再也不怕写不好Prompt了!

使用AI聊天、AI写作、还是AI绘图等过程中Prompt具有重要意义。 那么Prompt要怎么写效果才好&#xff1f;有没有标准化的模板可以直接用&#xff1f; 有&#xff0c;OpenAI官方发布了一份提示词工程指南&#xff0c;该指南分享了6大策略即可让AI输出更好的结果。至此&#xff…

无线领夹麦克风哪个品牌性价比高?推荐领夹麦克风性价比最高品牌

当今的直播、短视频已经深深的融入到了我们的生活当中&#xff0c;很多小伙伴会通过拍摄短视频、Vlog来分享自己生活精彩的瞬间。不过录制视频时&#xff0c;如果单纯靠手机拾音&#xff0c;距离手机越远&#xff0c;声音越小越不清晰如果有噪音干扰&#xff0c;那更是“惨不忍…

ONVIF相关介绍

ONVIF致力于通过全球性的开放接口标准来推进网络视频在安防市场的应用,这一接口标准将确保不同厂商生产的网络视频产品具有互通性。2008年11月,论坛正式发布了ONVIF第一版规范——ONVIF核心规范1.0。随着视频监控的网络化应用,产业链的分工将越来越细。有些厂商专门做摄像头…

pytest中失败用例重跑

pip install pytest-rerunfailures 下载rerunfailures插件包 配置文件中加入命令 --reruns 次数 也可在命令行中pytest --rerun-failures2 可以在allure报告中看到重试效果

【Echarts系列】水平柱状图

【Echarts系列】水平柱状图 序示例数据格式代码 序 为了节省后续开发学习成本&#xff0c;这个系列将记录我工作所用到的一些echarts图表。 示例 水平柱状图如图所示&#xff1a; 数据格式 data [{name: 于洪区,value: 2736},{name: 新民市,value: 2844},{name: 皇姑区,…

C++:SLT容器-->queue

C:SLT容器-->queue 1. queue容器2. queue 常用接口 1. queue容器 先进先出队列允许从一端插入元素&#xff0c;从另一端删除元素队列中只有队头和队尾可以被外界使用&#xff0c;因此队列不允许有遍历行为队列中插入数据称为入队(push)&#xff0c;删除数据称为出队(pop) …

JS 实现动态规划

function getPaths(m, n) {// m * n 二维数组&#xff0c;模拟网格const map new Array(m)for (let i 0; i < m; i) {map[i] new Array(n)}// 如果只走第一行&#xff0c;就只有一条路径。所以第一行所有 item 都填充 1map[0].fill(1)// 如果只走第一列&#xff0c;也只有…

【vue3|第8期】深入理解Vue 3 computed计算属性

日期&#xff1a;2024年6月10日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

合约ABI探秘

EOA使用ABI调用 合约之间使用接口调用 自己写ABI&#xff0c;自己写接口 ABI探秘 EOA使用的ABI数据与合约间调用时调用者持有的接口时等价的&#xff0c;都是对合约函数签名的完整描述调用者使用ABI数据生成message中的calldata message上下文的变化 合约之间的调用也模拟…

8.11 矢量图层线要素单一符号使用六(光栅线)

文章目录 前言光栅线&#xff08;Raster Line&#xff09;QGis设置线符号为光栅线&#xff08;Raster Line&#xff09;二次开发代码实现光栅线&#xff08;Raster Line&#xff09; 总结 前言 本章介绍矢量图层线要素单一符号中光栅线&#xff08;Raster Line&#xff09;的使…

如何通过加密U盘 实现数据传输闭环管控?

加密U盘是用来保护存储在其中数据的安全的。通过加密技术&#xff0c;用户可以将其敏感文件和信息存储在U盘中&#xff0c;并设置密码或使用其他加密方法来防止未经授权的访问。这种安全措施可以防止数据泄露或盗窃&#xff0c;特别是在丢失或被盗的情况下&#xff0c;确保数据…

机床联网第一课

一、不是废话的废话 照例第一篇文章先介绍下整个专栏系列的内容和背景&#xff0c;这篇文章不涉及任何代码和技术知识&#xff0c;大家都能看得懂。 1、写作初衷 自入行接触设备数据采集、设备联网工作近十年&#xff0c;期间记不清有多少次有人请我帮忙去处理公司外部的项目&…

软件下载网站源码附手机版和图文教程

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程&#xff0c;可以做软件库&#xff0c;也可以做推广app下载等等&#xff0c;需要的朋友可以下载 源码下载 软件下载网站源码附手机版和图文…

Android14之向build.prop添加属性(二百一十九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

Vuepress 2从0-1保姆级进阶教程——标准化流程(Tailwindcss+autoprefixer+commitizen)

Vuepress 2 专栏目录【已完结】 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——主题与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程—…

电影推荐系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;免费电影管理&#xff0c;付费电影管理&#xff0c;电影论坛管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;付费电影&#x…

element-plus的el-space标签的使用

el-space标签可以很方便的设置标签间距和分隔符&#xff0c;对齐方式&#xff0c;是否拆行等属性。 <script setup lang"ts"> import { onMounted, ref } from vue;const sizeref(30)</script><template><el-space wrap :size"size"…