Core Animation簡介(二)

各種Layer

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

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

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

下面是一段例子:

Paste_Image.png

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

CAEmitterCell指定contents來定義了粒子的內(nèi)容互例,emissionLongitude和emissionLatitude指定了經(jīng)緯度,經(jīng)度角代表了x-y軸平面上與x軸之間的夾角筝闹,緯度角代表了x-z軸平面上與x軸之間的夾角媳叨。emissionRange設(shè)置了一個范圍腥光,圍繞著y軸負方向,建立了一個圓錐形糊秆,粒子從這個圓錐形的范圍內(nèi)打出武福。lifetime設(shè)置了粒子的存活時長,在1.6秒之后痘番,粒子消失捉片。birthRate定義每秒生成100個,與CAEmitterLayer的birtuRate相乘汞舱,即最終的粒子數(shù)量400個每秒伍纫。velcity指定了初速度,velcityRange設(shè)置初速度在300到500之間浮動昂芜,yAcceleration指定了沿y軸250的加速度莹规,用于給粒子減速。color設(shè)置了粒子的顏色泌神,并設(shè)置了每個色值的浮動范圍良漱,用于生成所有顏色的煙火。最后設(shè)置了名稱欢际,以后可以再次引用它债热。效果如下:

Paste_Image.png

二、CAGradientLayer

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

Paste_Image.png

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

Paste_Image.png

三儡陨、CAReplicatorLayer

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

Paste_Image.png

webView繼承自UIWebView呀枢,重寫了layerClass方法,改用CAReplicatorLayer笼痛。設(shè)置instanceCount為2裙秋,那么就有一個原layer和一個副本layer。創(chuàng)建一個CATransform3D晃痴,讓它向下移動残吩,頂部和原layer相隔5,旋轉(zhuǎn)副本layer倘核,將其倒置泣侮,然后將它的高度縮小成80%,最后將變化賦值給instanceTransform紧唱。instanceAlphaOffset活尊、instanceRedOffset、instanceGreenOffset漏益、instanceBlueOffset都設(shè)置為-0.1蛹锰,每個副本都在上一個的基礎(chǔ)上將透明度、RGB三色減小0.1绰疤。
效果如下:

Paste_Image.png

四铜犬、CAScrollLayer

CAScrollLayer提供了和UIScrollView的基本功能。只不過它是layer轻庆,只負責顯示癣猾,不響應用戶事件,也不提供滾動條余爆。
例子如下:

Paste_Image.png

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

五枢步、CATiledLayer

CATiledLayer提供異步加載圖片各部分的功能沉删。layer的drawLayer:inContext:方法會在出現(xiàn)時回調(diào)渐尿,用來繪制對應部分的內(nèi)容》澹可以通過Context的clip bounds和CTM(當前圖形上下文的仿射變換砖茸,CGContextGetCTM方法)來判斷是圖片的哪一部分以及大小。
例子如下:

Paste_Image.png

在View中殴穴,通過重寫layerClass來設(shè)置layer為CATiledLayer凉夯,init方法中,設(shè)置layer的tileSize為100x100的大小采幌,那么其中的每塊大小都是100x100劲够。在drawLayer:inContext:方法中,通過CGContextGetClipBoundingBox方法獲取到了需要繪制的圖形上下文的位置與大小休傍,之后將其填充為帶邊框的紅色征绎。在調(diào)用view的時候,設(shè)置view的frame為一個很大的區(qū)域磨取,放置到scrollView中人柿,當某個區(qū)域可見時,會調(diào)用drawLayer:方法來繪制此區(qū)域忙厌,而沒有通過滾動顯示的區(qū)域不會繪制凫岖。
效果如下:

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屬性會應用到每個sublayer,transform layer并不作為一個整體來實現(xiàn)半透明效果赁濒。

4轨奄、在transform layer上不可以調(diào)用hitTest:方法,因為它并不存在一個2D的坐標空間來定位所測試的點拒炎。

在transform layer上設(shè)置sublayerTransform的m34值挪拟,定位一個透視點,sublayer上應用z軸位置變換的動畫击你,就可以看到3D效果玉组。
效果如圖:

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谎柄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惯雳,更是在濱河造成了極大的恐慌朝巫,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件石景,死亡現(xiàn)場離奇詭異劈猿,居然都是意外死亡,警方通過查閱死者的電腦和手機潮孽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門揪荣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人往史,你說我怎么就攤上這事仗颈。” “怎么了怠堪?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵揽乱,是天一觀的道長。 經(jīng)常有香客問我粟矿,道長凰棉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任陌粹,我火速辦了婚禮撒犀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘掏秩。我一直安慰自己或舞,他們只是感情好,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布蒙幻。 她就那樣靜靜地躺著映凳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪邮破。 梳的紋絲不亂的頭發(fā)上诈豌,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音抒和,去河邊找鬼矫渔。 笑死,一個胖子當著我的面吹牛摧莽,可吹牛的內(nèi)容都是我干的庙洼。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼油够!你這毒婦竟也來了蚁袭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤叠聋,失蹤者是張志新(化名)和其女友劉穎撕阎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碌补,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡虏束,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了厦章。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镇匀。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖袜啃,靈堂內(nèi)的尸體忽然破棺而出汗侵,到底是詐尸還是另有隱情,我是刑警寧澤群发,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布晰韵,位于F島的核電站,受9級特大地震影響熟妓,放射性物質(zhì)發(fā)生泄漏雪猪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一起愈、第九天 我趴在偏房一處隱蔽的房頂上張望只恨。 院中可真熱鬧,春花似錦抬虽、人聲如沸官觅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽休涤。三九已至,卻和暖如春笛辟,著一層夾襖步出監(jiān)牢的瞬間功氨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工隘膘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疑故,地道東北人杠览。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓弯菊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子管钳,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容