Core Animation簡介(二)

各種Layer

一、CAEmitterLayer 粒子發(fā)生器

CAEmitterLayer用來實(shí)現(xiàn)基于Core Animation的粒子發(fā)生器系統(tǒng)。每個(gè)粒子都是一個(gè)CAEmitterCell的實(shí)例。粒子繪制在背景色與border之上。

在屬性中,可以指定Layer中的CAEmitterCell數(shù)組,每個(gè)cell定義了自己的一組屬性,如速度、粒子發(fā)生率、旋轉(zhuǎn)、縮放或者內(nèi)容等。每個(gè)粒子也都有一個(gè)emitterCells屬性,可以做為一個(gè)粒子發(fā)生器來運(yùn)作。Layer還可以設(shè)置發(fā)生器位置、發(fā)生器形狀、發(fā)射單元的位置等等。

下面是一段例子:

Paste_Image.png

CAEmitterLayer通過emitterPosition指定了emitter的位置,在view的中間偏下的地方,并且形狀為默認(rèn)的一個(gè)點(diǎn)。renderMode定義了粒子的渲染方式,在這里讓所有的粒子出現(xiàn)疊加增強(qiáng)的效果。birthRate讓粒子每秒產(chǎn)生四個(gè)。

CAEmitterCell指定contents來定義了粒子的內(nèi)容,emissionLongitude和emissionLatitude指定了經(jīng)緯度,經(jīng)度角代表了x-y軸平面上與x軸之間的夾角,緯度角代表了x-z軸平面上與x軸之間的夾角。emissionRange設(shè)置了一個(gè)范圍,圍繞著y軸負(fù)方向,建立了一個(gè)圓錐形,粒子從這個(gè)圓錐形的范圍內(nèi)打出。lifetime設(shè)置了粒子的存活時(shí)長,在1.6秒之后,粒子消失。birthRate定義每秒生成100個(gè),與CAEmitterLayer的birtuRate相乘,即最終的粒子數(shù)量400個(gè)每秒。velcity指定了初速度,velcityRange設(shè)置初速度在300到500之間浮動(dòng),yAcceleration指定了沿y軸250的加速度,用于給粒子減速。color設(shè)置了粒子的顏色,并設(shè)置了每個(gè)色值的浮動(dòng)范圍,用于生成所有顏色的煙火。最后設(shè)置了名稱,以后可以再次引用它。效果如下:

Paste_Image.png

二、CAGradientLayer

CAGradientLayer用來繪制漸變色,指定幾個(gè)顏色值、漸變結(jié)束位置,就能在layer中繪制出漸變效果。下面是一段例子:

Paste_Image.png

例子中的layer是加在一個(gè)UIImageView之上的,設(shè)置為半透明,在漸變色下顯示出圖片內(nèi)容。colors指定漸變色選取紅色、綠色和藍(lán)色三色。locations設(shè)置了紅色與綠色的漸變區(qū)域在20%與50%之間,小于20%的位置為紅色,50%位置為綠色,綠色與藍(lán)色的漸變區(qū)域在50%與80%之間,大于80%的位置為藍(lán)色。startPoint設(shè)置為左上角,endPoint設(shè)置為右下角,顏色從左上角逐漸變到右下角。
效果如下:

Paste_Image.png

三、CAReplicatorLayer

CAReplicatorLayer創(chuàng)建layer和它的sublayer的多個(gè)副本,副本可以設(shè)置transform來變形,或者設(shè)置顏色、透明度的變化。
例子如下:

Paste_Image.png

webView繼承自UIWebView,重寫了layerClass方法,改用CAReplicatorLayer。設(shè)置instanceCount為2,那么就有一個(gè)原layer和一個(gè)副本layer。創(chuàng)建一個(gè)CATransform3D,讓它向下移動(dòng),頂部和原layer相隔5,旋轉(zhuǎn)副本layer,將其倒置,然后將它的高度縮小成80%,最后將變化賦值給instanceTransform。instanceAlphaOffset、instanceRedOffset、instanceGreenOffset、instanceBlueOffset都設(shè)置為-0.1,每個(gè)副本都在上一個(gè)的基礎(chǔ)上將透明度、RGB三色減小0.1。
效果如下:

Paste_Image.png

四、CAScrollLayer

CAScrollLayer提供了和UIScrollView的基本功能。只不過它是layer,只負(fù)責(zé)顯示,不響應(yīng)用戶事件,也不提供滾動(dòng)條。
例子如下:

Paste_Image.png

CAScrollLayer上添加一個(gè)子layer,layer的內(nèi)容是一張大圖片,scrollLayer又作為一個(gè)子layer加到當(dāng)前view中。在當(dāng)前View上添加了手勢,當(dāng)觸發(fā)平移手勢時(shí),獲取平移的量,調(diào)用CAScrollLayer的scrollToPoint方法,讓scrollLayer滾動(dòng)一定位置。設(shè)置scrollMode為兩個(gè)方向均可滾動(dòng),來允許向各個(gè)方向滾動(dòng),也可以限制只能在一個(gè)方向上滾動(dòng)。

五、CATiledLayer

CATiledLayer提供異步加載圖片各部分的功能。layer的drawLayer:inContext:方法會(huì)在出現(xiàn)時(shí)回調(diào),用來繪制對(duì)應(yīng)部分的內(nèi)容??梢酝ㄟ^Context的clip bounds和CTM(當(dāng)前圖形上下文的仿射變換,CGContextGetCTM方法)來判斷是圖片的哪一部分以及大小。
例子如下:

Paste_Image.png

在View中,通過重寫layerClass來設(shè)置layer為CATiledLayer,init方法中,設(shè)置layer的tileSize為100x100的大小,那么其中的每塊大小都是100x100。在drawLayer:inContext:方法中,通過CGContextGetClipBoundingBox方法獲取到了需要繪制的圖形上下文的位置與大小,之后將其填充為帶邊框的紅色。在調(diào)用view的時(shí)候,設(shè)置view的frame為一個(gè)很大的區(qū)域,放置到scrollView中,當(dāng)某個(gè)區(qū)域可見時(shí),會(huì)調(diào)用drawLayer:方法來繪制此區(qū)域,而沒有通過滾動(dòng)顯示的區(qū)域不會(huì)繪制。
效果如下:

Paste_Image.png

六、CATransformLayer

CATransformLayer用來創(chuàng)建3D的layer結(jié)構(gòu),而不是CALayer那樣的扁平結(jié)構(gòu)。和普通layer不同的地方有:

1、transform layer只渲染sublayers,那些從CALayer繼承下來的屬性不起作用,包括:backgroundColor, contents, border style properties, stroke style properties等。

2、2D圖片的處理屬性也不起作用,包括:filters, backgroundFilters, compositingFilter, mask, masksToBounds以及陰影屬性。

3、opacity屬性會(huì)應(yīng)用到每個(gè)sublayer,transform layer并不作為一個(gè)整體來實(shí)現(xiàn)半透明效果。

4、在transform layer上不可以調(diào)用hitTest:方法,因?yàn)樗⒉淮嬖谝粋€(gè)2D的坐標(biāo)空間來定位所測試的點(diǎn)。

在transform layer上設(shè)置sublayerTransform的m34值,定位一個(gè)透視點(diǎn),sublayer上應(yīng)用z軸位置變換的動(dòng)畫,就可以看到3D效果。
效果如圖:

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容