高級動畫學習心得筆記(四)視覺效果

4.1圓角

CALayer有一個叫做cornerRadius的屬性控制著圖層角的曲率秉犹,它是一個浮點數(shù)余素,默認為0(直角)辛燥。默認情況下扇住,這個屬性值只影響背景顏色而不影響背景圖片或是子圖層盈厘。不過睁枕,如果把masksToBounds設(shè)置為YES的話,圖層里面所有的東西都會被裁剪沸手。

單獨控制每個圖層的圓角曲率也是可以的外遇。如果想創(chuàng)建部分圓角部分直角的圖層或試圖時,你可能需要一些不同的方法契吉,比如使用一個圖層蒙版或者是CAShapeLayer

4.2圖層邊框

borderWidth:邊框?qū)挾忍拢↑c型,默認為0.

borderColor:邊框顏色捐晶,CGColorRef類型菲语,默認為黑色。OC語法中惑灵,CGColorRef即使是強引用也只能通過assign來修飾

這兩個屬性共同定義了圖層邊的繪制樣式山上,這條線使用stoke方式沿著圖層的bounds繪制,同事也包含圖層的角

邊框是繪制在圖層邊界里面的英支,而且在所有子內(nèi)容之前佩憾,也在子圖層之前。也就是說潭辈,無論子圖層或者子視圖的內(nèi)容是否超出邊界鸯屿,或者是寄宿圖在透明區(qū)域有一個透明蒙版澈吨,邊框仍然會沿著圖層的邊界繪制出來,并且顯示在用戶視角的最前方

4.3陰影

4.3.1陰影的各個要素

陰影往往可以達到圖層深度暗示的效果寄摆。也能夠用來強調(diào)正在顯示的圖層和優(yōu)先級(比如說一個在其他視圖之前的彈出框)谅辣,不過有時候他們只是單純的裝飾目的。

shadowOpacity:取值范圍在0.0(不可見)和1.0(完全不透明)之前的浮點數(shù)婶恼。給shadowOpacity一個大于默認值(默認值為0)的值桑阶,陰影就可以顯示在任意圖層之下。如果設(shè)置為1.0勾邦,將會顯示一個有輕微模糊的黑色陰影稍微在圖層之上蚣录。

shadowColor:控制陰影的顏色,和borderColor和backgroundColor一樣眷篇,它的類型也是CGColorRef萎河。陰影默認為黑色,也可以設(shè)置其它顏色

shadowOffset:控制陰影的方向和距離蕉饼,它是一個CGSize類型的值虐杯,寬度控制陰影橫向的位移,高度控制縱向的位移昧港。shadowOffset默認值為{0,-3}擎椰,即陰影相對于Y軸有3個點的向上位移。在Mac OS上创肥,由于Y軸和ios是顛倒的达舒,,雖然默認值仍然是{0,-3}叹侄,但它是向下偏移3個點的巩搏。蘋果更傾向于用戶界面的陰影是垂直向下的,所以在ios上把陰影寬度設(shè)置為0圈膏,然后高度設(shè)置為正值是符合蘋果審美的做法塔猾。

shadowRadius:控制陰影的模糊度,默認為0稽坤,當它的值是0的時候丈甸,陰影和視圖一樣有一個非常確定的邊界線,當值越來越大的時候尿褪,邊界線看上去就會越來越模糊和自然睦擂。蘋果自家的應(yīng)用設(shè)計更偏向于自然的陰影,所以一個非零值是更好的選擇杖玲。

4.3.2陰影裁剪

和圖層邊框不同顿仇,圖層的陰影繼承自內(nèi)容的外形,而不是根據(jù)邊界和角半徑來確定。為了計算出陰影的形狀臼闻,Core Animation會將寄宿圖(包括子視圖鸿吆,如果有的話)考慮在內(nèi),然后通過這些來完美他陪圖層形狀從而創(chuàng)建一個陰影

當陰影和裁剪扯上關(guān)系的時候就有一個頭疼的問題:陰影通常就是在layer的邊界之外述呐,如果設(shè)置了masksToBounds為YES的話惩淳,所有從圖層中凸出來的內(nèi)容都會被裁剪掉。

如果想沿著內(nèi)容裁切乓搬,但是又需要有陰影的話思犁,你需要用到兩個圖層:一個只畫陰影的空的外圖層,和一個用masksToBounds裁剪內(nèi)容的內(nèi)涂層进肯。

4.3.3 shadowPath屬性

通常情況下激蹲,陰影是從圖層內(nèi)容的形狀繼承而來,但是實時計算陰影也是非常消耗資源的江掩,尤其是圖層有多個子圖層学辱,每個圖層還有一個有透明效果的寄宿圖的時候

如果事先知道陰影形狀回事什么樣子的,可以通過制定一個shadowPath來提高性能频敛,shadowPath是一個CGPathRef類型(一個指向CGPath的指針)项郊。CGPath是一個Core Graphics對象,用來指定任意的矢量圖形斟赚。我們可以通過這個屬性單獨于圖層形狀之外指定陰影的形狀。

如果是一個矩形或者是圓差油,用CGPath會相當簡單明了拗军。但是如果是更加負責一點的圖形,UIBezierPath類會更合適蓄喇,它是一個由UIKit提供的在CGPath基礎(chǔ)上的OC包裝類

4.4 圖層蒙版

mask:CALayer類型发侵,它可以讓你以編碼的方式動態(tài)的生成蒙版,也不能讓子圖層或子視圖裁剪成同樣的情況妆偏。

它有和其它圖層一樣的繪制和布局屬性刃鳄。

它類似一個子圖層,相對于父圖層(即擁有該屬性的圖層)布局钱骂,但是它卻不是一個普通的子圖層叔锐,mask圖層定義了父圖層的部分可見區(qū)域。

mask圖層的color屬性是無關(guān)緊要的见秽,真正重要的是圖層的輪廓愉烙。mask圖層實心的部分會被保留下來,其它的則會被拋棄解取。(Layer的透明度決定了Layer內(nèi)容是否可以顯示,非透明的內(nèi)容和背景可以顯示,透明的則無法顯示.)

如果mask圖層比父圖層小敞葛,只有在mask圖層里面的內(nèi)容才是它關(guān)心的袜瞬,除此以外的一切都會被隱藏起來苫亦。

mask真正厲害的地方在于蒙版圖不局限于靜態(tài)圖期虾。任何有圖層構(gòu)成的都可以作為mask屬性,這意味著你的蒙版可以通過代碼甚至是動畫實時生成肝集。

4.5拉伸過濾

minificationFilter 用于內(nèi)容減小時候的拉伸過濾算法

magnificationFilter 用于內(nèi)容增大時候的拉伸過濾算法

它們都是NSString類型,但是值都是Scaling Filters 常量中選取,有以下三種:

.kCAFilterLinear 雙線性濾波算法稿辙,它在大多數(shù)情況下表現(xiàn)良好。雙線性濾波算法通過對多個像素取樣最終生成新的值气忠,得到一個平滑的表現(xiàn)不錯的拉伸邻储。但是當放大倍數(shù)比較大的時候圖片就模糊不清了。

.kCAFilterNearest 最近過濾算法旧噪,這是一種比較武斷的方法吨娜。這個算法就是取樣最近的單像素點而不管其它的顏色。這樣做非程灾樱快宦赠,也不會使圖片模糊,但是米母,最明顯的效果就是勾扭,會是的壓縮圖片更糟,圖片放大之后也顯得塊狀或是馬賽克嚴重铁瞒。對于比較小的圖或者是差異特別明顯妙色,極少斜線的大圖,最近過濾算法會保留這種差異明顯的特質(zhì)以呈現(xiàn)更好的結(jié)果慧耍。但是對于大多數(shù)的圖尤其是有很多斜線或是曲線輪廓的圖片來說身辨,最近過濾算法會導致更差的結(jié)果。換句話說芍碧,線性過濾保留了形狀煌珊,最近過濾則保留了像素的差異。

.kCAFilterTrilinear 三線性濾波算法泌豆,和kCAFilterLinear非常類似定庵,大部分情況下二者都看不出來有什么差別。但是踪危,較雙線性濾波算法而言蔬浙,三線性濾波算法存儲了多個大小情況下的圖片(也叫多重貼圖),并三維取樣陨倡,同時結(jié)合大圖和小圖的存儲進而得到最后的結(jié)果敛滋。這個方法的好處在于能夠從一系列已經(jīng)接近于最終大小的圖片中得到想要的結(jié)果,也就是說不需要對很多像素同步取樣兴革。這不僅提高了性能绎晃,也避免了小概率因舍入錯誤引起的取樣失靈的問題蜜唾。

minificationFilter和magnificationFilter屬性的默認值都是kCAFilterLinear。

4.6組透明

opacity:確定圖層的透明度庶艾,對應(yīng)于UIView的alpha屬性袁余,這兩個屬性都是影響子層級的。也就是說咱揍,如果你給一個圖層設(shè)置了opacity屬性颖榜,那它的子圖層都會受此影響。

ios常常把一個控件的alpha值設(shè)置為0.5以使其看上去呈現(xiàn)為不可用狀態(tài)煤裙。

當你顯示一個50%透明度的圖層時掩完,圖層的每個像素都會一半顯示自己的顏色,另一半顯示圖層下面的顏色硼砰。但是如果圖層包含一個同樣50%透明的子圖層時且蓬,你所看到的視圖,50%來自子視圖题翰,25%來自圖層本身的顏色,另外25%則來自背景色恶阴。

理想狀況下,當你設(shè)置了一個圖層的透明度豹障,你希望它包含的整個圖層樹像一個整體一樣的透明效果冯事,你可以通過設(shè)置Info.plist文件中的UIViewGroupOpacity為YES來達到這個效果,但是這個設(shè)置會影響到整個應(yīng)用.

另外一個方法就是血公,設(shè)置CALayer的shouldRasterize屬性來實現(xiàn)組透明的效果昵仅,如果它被設(shè)置為YES,在應(yīng)用透明度之前坞笙,圖層及其子圖層都會被整合成一個整體的圖片岩饼,這樣就沒有透明度混合的問題了。

為了啟動shouldRasterize屬性薛夜,我們設(shè)置了圖層的rasterizationScale屬性。默認情況下版述,所有圖層拉伸都是1.0梯澜,所以如果你使用了shouldRasterize屬性,就得確保設(shè)置了rasterizationScale屬性去匹配屏幕渴析,以防止出現(xiàn)Retina屏幕像素化的問題晚伙。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市俭茧,隨后出現(xiàn)的幾起案子咆疗,更是在濱河造成了極大的恐慌,老刑警劉巖母债,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件午磁,死亡現(xiàn)場離奇詭異尝抖,居然都是意外死亡,警方通過查閱死者的電腦和手機迅皇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門昧辽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人登颓,你說我怎么就攤上這事搅荞。” “怎么了框咙?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵咕痛,是天一觀的道長。 經(jīng)常有香客問我喇嘱,道長茉贡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任婉称,我火速辦了婚禮块仆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘王暗。我一直安慰自己悔据,他們只是感情好,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布俗壹。 她就那樣靜靜地躺著科汗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绷雏。 梳的紋絲不亂的頭發(fā)上头滔,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天,我揣著相機與錄音涎显,去河邊找鬼坤检。 笑死,一個胖子當著我的面吹牛期吓,可吹牛的內(nèi)容都是我干的早歇。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼讨勤,長吁一口氣:“原來是場噩夢啊……” “哼箭跳!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起潭千,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤谱姓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后刨晴,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屉来,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡路翻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奶躯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片帚桩。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖嘹黔,靈堂內(nèi)的尸體忽然破棺而出账嚎,到底是詐尸還是另有隱情,我是刑警寧澤儡蔓,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布郭蕉,位于F島的核電站,受9級特大地震影響喂江,放射性物質(zhì)發(fā)生泄漏召锈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一获询、第九天 我趴在偏房一處隱蔽的房頂上張望涨岁。 院中可真熱鬧,春花似錦吉嚣、人聲如沸梢薪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽秉撇。三九已至,卻和暖如春秋泄,著一層夾襖步出監(jiān)牢的瞬間琐馆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工恒序, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瘦麸,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓歧胁,卻偏偏與公主長得像瞎暑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子与帆,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

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