iOS核心動畫高級技巧(筆記)——(三)視覺效果

圓角

  • CALayer有一個叫做conrnerRadius的屬性控制著圖層角的曲率糊渊。它是一個浮點數(shù),默認(rèn)為0(為0的時候就是直角)介粘,但是你可以把它設(shè)置成任意值喷鸽。

圖層邊框

  • CALayer另外兩個非常有用屬性就是borderWidthborderColor。二者共同定義了圖層邊的繪制樣式讼庇。這條線(也被稱作stroke)沿著圖層的bounds繪制绎巨,同時也包含圖層的角。
    borderWidth是以點為單位的定義邊框粗細(xì)的浮點數(shù)蠕啄,默認(rèn)為0.
    borderColor定義了邊框的顏色场勤,默認(rèn)為黑色。borderColor是CGColorRef類型歼跟,而不是UIColor和媳,所以它不是Cocoa的內(nèi)置對象。
    myView.layer.shadowColor = UIColor.grayColor().CGColor

陰影

  • shadowOpacity屬性一個大于默認(rèn)值(也就是0)的值哈街,陰影就可以顯示在任意圖層之下留瞳。shadowOpacity是一個必須在0.0(不可見)和1.0(完全不透明)之間的浮點數(shù)。若要改動陰影的表現(xiàn)骚秦,你可以使用CALayer的另外三個屬性:shadowColor她倘,shadowOffsetshadowRadius璧微。
  • shadowColor屬性控制著陰影的顏色,和borderColorbackgroundColor一樣前硫,它的類型也是CGColorRef靶溜。陰影默認(rèn)是黑色罩息,大多數(shù)時候你需要的陰影也是黑色的。
  • shadowOffset屬性控制著陰影的方向和距離葱色。它是一個CGSize的值苍狰,寬度控制這陰影橫向的位移淋昭,高度控制著縱向的位移翔忽。shadowOffset的默認(rèn)值是 {0, -3}歇式,意即陰影相對于Y軸有3個點的向上位移材失。
  • shadowRadius屬性控制著陰影的模糊度硫豆,當(dāng)它的值是0的時候,陰影就和視圖一樣有一個非常確定的邊界線恭应。當(dāng)值越來越大的時候耘眨,邊界線看上去就會越來越模糊和自然境肾。蘋果自家的應(yīng)用設(shè)計更偏向于自然的陰影胆屿,所以一個非零值再合適不過了非迹。

圖層蒙版

  • CALayer有一個屬性叫做mask可以用編碼的方式動態(tài)地生成蒙板憎兽,這個屬性本身就是個CALayer類型纯命,有和其他圖層一樣的繪制和布局屬性亿汞。它類似于一個子圖層疗我,相對于父圖層(即擁有該屬性的圖層)布局吴裤,但是它卻不是一個普通的子圖層麦牺。不同于那些繪制在父圖層中的子圖層矿瘦,mask圖層定義了父圖層的部分可見區(qū)域。
    let maskLayer = CALayer()
    let maskImage = UIImage(named: "heart")
    maskLayer.contents = maskImage?.CGImage
    maskLayer.frame = myImageView.bounds
    myImageView.layer.mask = maskLayer

注意:
myImageView是maskLayer的父視圖

mask

拉伸過濾

  • CALayer提供了三種拉伸過濾方法缚去,他們是:
    kCAFilterLinear
    kCAFilterNearest
    kCAFilterTrilinear
  • minification(縮小圖片)和magnification(放大圖片)默認(rèn)的過濾器都是kCAFilterLinear,這個過濾器采用雙線性濾波算法易结,它在大多數(shù)情況下都表現(xiàn)良好。雙線性濾波算法通過對多個像素取樣最終生成新的值搞动,得到一個平滑的表現(xiàn)不錯的拉伸躏精。但是當(dāng)放大倍數(shù)比較大的時候圖片就模糊不清了鹦肿。
  • kCAFilterTrilinear和kCAFilterLinear非常相似矗烛,大部分情況下二者都看不出來有什么差別。但是箩溃,較雙線性濾波算法而言碌嘀,三線性濾波算法存儲了多個大小情況下的圖片(也叫多重貼圖)歪架,并三維取樣,同時結(jié)合大圖和小圖的存儲進(jìn)而得到最后的結(jié)果止状。
    這個方法的好處在于算法能夠從一系列已經(jīng)接近于最終大小的圖片中得到想要的結(jié)果,也就是說不要對很多像素同步取樣剔蹋。這不僅提高了性能泣崩,也避免了小概率因舍入錯誤引起的取樣失靈的問題。
  • kCAFilterNearest是一種比較武斷的方法矫付。從名字不難看出凯沪,這個算法(也叫最近過濾)就是取樣最近的單像素點而不管其他的顏色。這樣做非陈蛴牛快妨马,也不會使圖片模糊。但是杀赢,最明顯的效果就是烘跺,會使得壓縮圖片更糟,圖片放大之后也顯得塊狀或是馬賽克嚴(yán)重脂崔。
    總的來說滤淳,對于比較小的圖或者是差異特別明顯,極少斜線的大圖砌左,最近過濾算法會保留這種差異明顯的特質(zhì)以呈現(xiàn)更好的結(jié)果脖咐。但是對于大多數(shù)的圖尤其是有很多斜線或是曲線輪廓的圖片來說,最近過濾算法會導(dǎo)致更差的結(jié)果汇歹。換句話說屁擅,線性過濾保留了形狀,最近過濾則保留了像素的差異产弹。
    view.layer.magnificationFilter = kCAFilterNearest

組透明

  • UIView的alpha屬性和CALayer的opacity屬性都用來確定視圖的透明度派歌,這兩個屬性都是影響子層級的。也就是說,如果你給一個圖層設(shè)置了opacity屬性硝皂,那它的子圖層都會受此影響常挚。
    iOS常見的做法是把一個控件的alpha值設(shè)置為0.5(50%)以使其看上去呈現(xiàn)為不可用狀態(tài)作谭。對于獨立的視圖來說還不錯稽物,但是當(dāng)一個控件有子視圖的時候就有點奇怪了,下圖展示了一個內(nèi)嵌了UILabel的自定義UIButton折欠;左邊是一個不透明的按鈕贝或,右邊是50%透明度的相同按鈕。我們可以注意到锐秦,里面的標(biāo)簽的輪廓跟按鈕的背景很不搭調(diào)咪奖。

組透明

可以設(shè)置CALayer的一個叫做shouldRasterize屬性來實現(xiàn)組透明的效果,如果它被設(shè)置為YES酱床,在應(yīng)用透明度之前羊赵,圖層及其子圖層都會被整合成一個整體的圖片,這樣就沒有透明度混合的問題扇谣。
為了啟用shouldRasterize屬性昧捷,我們設(shè)置了圖層的rasterizationScale屬性。默認(rèn)情況下罐寨,所有圖層拉伸都是1.0靡挥, 所以如果你使用了shouldRasterize屬性,你就要確保你設(shè)置了rasterizationScale屬性去匹配屏幕鸯绿,以防止出現(xiàn)Retina屏幕像素化的問題跋破。
<pre><code> button2.layer.shouldRasterize = YES
button2.layer.rasterizationScale = UIScreen.mainScreen().scale</code></pre>

修正后
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市瓶蝴,隨后出現(xiàn)的幾起案子毒返,更是在濱河造成了極大的恐慌,老刑警劉巖舷手,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拧簸,死亡現(xiàn)場離奇詭異,居然都是意外死亡聚霜,警方通過查閱死者的電腦和手機(jī)狡恬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝎宇,“玉大人弟劲,你說我怎么就攤上這事±呀妫” “怎么了兔乞?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我庸追,道長霍骄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任淡溯,我火速辦了婚禮读整,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘咱娶。我一直安慰自己米间,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布膘侮。 她就那樣靜靜地躺著屈糊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪琼了。 梳的紋絲不亂的頭發(fā)上逻锐,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機(jī)與錄音雕薪,去河邊找鬼昧诱。 笑死,一個胖子當(dāng)著我的面吹牛蹦哼,可吹牛的內(nèi)容都是我干的鳄哭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼纲熏,長吁一口氣:“原來是場噩夢啊……” “哼妆丘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起局劲,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤勺拣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鱼填,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體药有,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年苹丸,在試婚紗的時候發(fā)現(xiàn)自己被綠了愤惰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡赘理,死狀恐怖宦言,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情商模,我是刑警寧澤奠旺,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布蜘澜,位于F島的核電站,受9級特大地震影響响疚,放射性物質(zhì)發(fā)生泄漏鄙信。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一忿晕、第九天 我趴在偏房一處隱蔽的房頂上張望装诡。 院中可真熱鬧,春花似錦杏糙、人聲如沸慎王。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜀漆,卻和暖如春谅河,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背确丢。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工绷耍, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鲜侥。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓褂始,卻偏偏與公主長得像,于是被迫代替她去往敵國和親描函。 傳聞我的和親對象是個殘疾皇子崎苗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,585評論 2 359

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