Core Animation简介(二)

各种Layer

一、CAEmitterLayer 粒子发生器

CAEmitterLayer用来实现基于Core Animation的粒子发生器系统。每个粒子都是一个CAEmitterCell的实例。粒子绘制在背景色与border之上。

在属性中,可以指定Layer中的CAEmitterCell数组,每个cell定义了自己的一组属性,如速度、粒子发生率、旋转、缩放或者内容等。每个粒子也都有一个emitterCells属性,可以做为一个粒子发生器来运作。Layer还可以设置发生器位置、发生器形状、发射单元的位置等等。

下面是一段例子:

Paste_Image.png

CAEmitterLayer通过emitterPosition指定了emitter的位置,在view的中间偏下的地方,并且形状为默认的一个点。renderMode定义了粒子的渲染方式,在这里让所有的粒子出现叠加增强的效果。birthRate让粒子每秒产生四个。

CAEmitterCell指定contents来定义了粒子的内容,emissionLongitude和emissionLatitude指定了经纬度,经度角代表了x-y轴平面上与x轴之间的夹角,纬度角代表了x-z轴平面上与x轴之间的夹角。emissionRange设置了一个范围,围绕着y轴负方向,建立了一个圆锥形,粒子从这个圆锥形的范围内打出。lifetime设置了粒子的存活时长,在1.6秒之后,粒子消失。birthRate定义每秒生成100个,与CAEmitterLayer的birtuRate相乘,即最终的粒子数量400个每秒。velcity指定了初速度,velcityRange设置初速度在300到500之间浮动,yAcceleration指定了沿y轴250的加速度,用于给粒子减速。color设置了粒子的颜色,并设置了每个色值的浮动范围,用于生成所有颜色的烟火。最后设置了名称,以后可以再次引用它。效果如下:

Paste_Image.png

二、CAGradientLayer

CAGradientLayer用来绘制渐变色,指定几个颜色值、渐变结束位置,就能在layer中绘制出渐变效果。下面是一段例子:

Paste_Image.png

例子中的layer是加在一个UIImageView之上的,设置为半透明,在渐变色下显示出图片内容。colors指定渐变色选取红色、绿色和蓝色三色。locations设置了红色与绿色的渐变区域在20%与50%之间,小于20%的位置为红色,50%位置为绿色,绿色与蓝色的渐变区域在50%与80%之间,大于80%的位置为蓝色。startPoint设置为左上角,endPoint设置为右下角,颜色从左上角逐渐变到右下角。
效果如下:

Paste_Image.png

三、CAReplicatorLayer

CAReplicatorLayer创建layer和它的sublayer的多个副本,副本可以设置transform来变形,或者设置颜色、透明度的变化。
例子如下:

Paste_Image.png

webView继承自UIWebView,重写了layerClass方法,改用CAReplicatorLayer。设置instanceCount为2,那么就有一个原layer和一个副本layer。创建一个CATransform3D,让它向下移动,顶部和原layer相隔5,旋转副本layer,将其倒置,然后将它的高度缩小成80%,最后将变化赋值给instanceTransform。instanceAlphaOffset、instanceRedOffset、instanceGreenOffset、instanceBlueOffset都设置为-0.1,每个副本都在上一个的基础上将透明度、RGB三色减小0.1。
效果如下:

Paste_Image.png

四、CAScrollLayer

CAScrollLayer提供了和UIScrollView的基本功能。只不过它是layer,只负责显示,不响应用户事件,也不提供滚动条。
例子如下:

Paste_Image.png

CAScrollLayer上添加一个子layer,layer的内容是一张大图片,scrollLayer又作为一个子layer加到当前view中。在当前View上添加了手势,当触发平移手势时,获取平移的量,调用CAScrollLayer的scrollToPoint方法,让scrollLayer滚动一定位置。设置scrollMode为两个方向均可滚动,来允许向各个方向滚动,也可以限制只能在一个方向上滚动。

五、CATiledLayer

CATiledLayer提供异步加载图片各部分的功能。layer的drawLayer:inContext:方法会在出现时回调,用来绘制对应部分的内容。可以通过Context的clip bounds和CTM(当前图形上下文的仿射变换,CGContextGetCTM方法)来判断是图片的哪一部分以及大小。
例子如下:

Paste_Image.png

在View中,通过重写layerClass来设置layer为CATiledLayer,init方法中,设置layer的tileSize为100x100的大小,那么其中的每块大小都是100x100。在drawLayer:inContext:方法中,通过CGContextGetClipBoundingBox方法获取到了需要绘制的图形上下文的位置与大小,之后将其填充为带边框的红色。在调用view的时候,设置view的frame为一个很大的区域,放置到scrollView中,当某个区域可见时,会调用drawLayer:方法来绘制此区域,而没有通过滚动显示的区域不会绘制。
效果如下:

Paste_Image.png

六、CATransformLayer

CATransformLayer用来创建3D的layer结构,而不是CALayer那样的扁平结构。和普通layer不同的地方有:

1、transform layer只渲染sublayers,那些从CALayer继承下来的属性不起作用,包括:backgroundColor, contents, border style properties, stroke style properties等。

2、2D图片的处理属性也不起作用,包括:filters, backgroundFilters, compositingFilter, mask, masksToBounds以及阴影属性。

3、opacity属性会应用到每个sublayer,transform layer并不作为一个整体来实现半透明效果。

4、在transform layer上不可以调用hitTest:方法,因为它并不存在一个2D的坐标空间来定位所测试的点。

在transform layer上设置sublayerTransform的m34值,定位一个透视点,sublayer上应用z轴位置变换的动画,就可以看到3D效果。
效果如图:

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容