目錄
1. UIView与CALayer
2. 隐式动画
2.1 事务
2.2 modelLayer与presentationLayer
总结一下
首頁 web前端 html教學 关于Core Animation动画(上)_html/css_WEB-ITnose

关于Core Animation动画(上)_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

关于Core Animation动画(上)

1. UIView与CALayer

对于UIView和CALayer,大家应该都很熟悉。通常我们了解到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个概念,modelLayer与presentationLayer。

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

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

总结一下

  • 我们了解了CAlayer是UIView的底层实现,UIView可以处理一些用户触摸的事件,而CALayer则提供了更丰富的底层功能。

  • 对于CALayer的属性改变,runloop会有一个默认的事物来进行隐式动画,而UIView则禁用掉了隐私动画,我们可以通过提交一个新的事物来对UIView的属性改变赋予一个可以控制的动画效果。

  • 我们了解了modelLayer的属性是在修改后立刻就变为终值的,而presentationLayer则会经历一个渐变的修改过程,这对于一些交互性的动画很有帮助。

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

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

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱門文章

    <🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    北端:融合系統,解釋
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    熱門話題

    Java教學
    1664
    14
    CakePHP 教程
    1423
    52
    Laravel 教程
    1318
    25
    PHP教程
    1269
    29
    C# 教程
    1248
    24
    了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

    HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

    HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

    HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

    HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

    HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

    HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

    HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

    HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

    HTML的角色:構建Web內容 HTML的角色:構建Web內容 Apr 11, 2025 am 12:12 AM

    HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容,使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

    HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

    HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

    See all articles