iOS核心動畫高級技巧--(四)視覺效果

在這一章,我們將會探索 一些能夠通過使用CALayer屬性實現的視覺效果。

圓角

圓角矩形是iOS的一個標志性審美特性。這在iOS的每一個地方都得到了體現, 不論是主屏幕圖標,還是警告彈框,甚至是文本框。按照這流行程度,你可能會認為一定有不借助Photoshop就能輕易創建圓角舉行的方法。恭喜你,猜對了。

CALayer有一個叫做 conrnerRadius 的屬性控制著圖層角的曲率。它是一個浮點數,默認為0(為0的時候就是直角),但是你可以把它設置成任意值。默認情況 下,這個曲率值只影響背景顏色而不影響背景圖片或是子圖層。不過,如果把masksToBounds設置成YES的話,圖層里面的所有東西都會被截取。

圖層邊框

CALayer另外兩個非常有用屬性就是 borderWidthborderColor。二者共同定義了圖層邊的繪制樣式。這條線(也被稱作stroke)沿著圖層的 bounds 繪制,同時也包含圖層的角。

borderWidth是以點為單位的定義邊框粗細的浮點數,默認為 0. borderColor 定義了邊框的顏色,默認為黑色。

borderColorCGColorRef類型,而不是UIColor,所以它不是Cocoa的 內置對象。不過呢,你肯定也清楚圖層引用了borderColor,雖然屬性聲明并不能證明這一點。CGColorRef在引用/釋放時候的行為表現得與NSObject極其相似。但是Objective-C語法并不支持這一做法,所以 CGColorRef屬性即便是強引用也只能通過assign關鍵字來聲明。

陰影

iOS的另一個常見特性呢,就是陰影。陰影往往可以達到圖層深度暗示的效果。 也能夠用來強調正在顯示的圖層和優先級(比如說一個在其他視圖之前的彈出框),不過有時候他們只是單純的裝飾目的。

shadowOpacity 屬性一個大于默認值(也就是0)的值,陰影就可以顯示在任意圖層之下。 shadowOpacity是一個必須在0.0(不可見)和1.0(完全不透 明)之間的浮點數。如果設置為1.0,將會顯示一個有輕微模糊的黑色陰影稍微在圖層之上。若要改動陰影的表現,你可以使用CALayer的另外三個屬
性: shadowColorshadowOffsetshadowRadius

顯而易見, shadowColor 屬性控制著陰影的顏色,和borderColor一樣,它的類型也是CGColorRef` 。陰影默認是黑色,大多數時候你需要的陰影也是黑色的(其他顏色的陰影看起來是不是
有一點點奇怪。。。)

shadowOffset屬性控制著陰影的方向和距離。它是一個 CGSize的值,寬度控制這陰影橫向的位移,高度控制著縱向的位移。shadowOffset 的默認值是 {0, -3},意即陰影相對于Y軸有3個點的向上位移。

shadowRadius 屬性控制著陰影的模糊度,當它的值是0的時候,陰影就和視圖 一樣有一個非常確定的邊界線。當值越來越大的時候,邊界線看上去就會越來越模 糊和自然。蘋果自家的應用設計更偏向于自然的陰影,所以一個非零值再合適不過了。

通常來講,如果你想讓視圖或控件非常醒目獨立于背景之外(比如彈出框遮罩層),你就應該給 shadowRadius設置一個稍大的值。陰影越模糊,圖層的深度 看上去就會更明顯.

陰影裁剪

和圖層邊框不同,圖層的陰影繼承自內容的外形,而不是根據邊界和角半徑來確定。為了計算出陰影的形狀,Core Animation會將寄宿圖(包括子視圖,如果有的話)考慮在內,然后通過這些來完美搭配圖層形狀從而創建一個陰影。

當陰影和裁剪扯上關系的時候就有一個頭疼的限制:陰影通常就是在 Layer的邊界之外,如果你開啟了 masksToBounds屬性,所有從圖層中突出來的 內容都會被才剪掉。如果在我們之前的邊框示例項目中增加圖層的陰影屬性時,你就會發現問題所在。

從技術角度來說,這個結果是可以是可以理解的,但確實又不是我們想要的效果。如果你想沿著內容裁切,你需要用到兩個圖層:一個只畫陰影的空的外圖層,和一個用masksToBounds 裁剪內容的內圖層。我們只把陰影用在最外層的視圖上,內層視圖進行裁剪。

shadowPath屬性

我們已經知道圖層陰影并不總是方的,而是從圖層內容的形狀繼承而來。這看上
去不錯,但是實時計算陰影也是一個非常消耗資源的,尤其是圖層有多個子圖層,
每個圖層還有一個有透明效果的寄宿圖的時候。

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

用 shadowPath 指定任意陰影形狀.png
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView1;
@property (nonatomic, weak) IBOutlet UIView *layerView2;
@end
@implementation ViewController
- (void)viewDidLoad{
  [super viewDidLoad];
  //enable layer shadows
  self.layerView1.layer.shadowOpacity = 0.5f;
  self.layerView2.layer.shadowOpacity = 0.5f;
  //create a square shadow
  CGMutablePathRef squarePath = CGPathCreateMutable();
  CGPathAddRect(squarePath, NULL, self.layerView1.bounds);
  self.layerView1.layer.shadowPath = squarePath;
  CGPathRelease(squarePath);
   //create a circular shadow
  CGMutablePathRef circlePath = CGPathCreateMutable();
  CGPathAddEllipseInRect(circlePath, NULL, self.layerView2.bounds)
  self.layerView2.layer.shadowPath = circlePath; 
  CGPathRelease(circlePath);
@end;

如果是一個矩形或者是圓,用 CGPath會相當簡單明了。但是如果是更加復雜一 點的圖形, UIBezierPath類會更合適,它是一個由UIKit提供的在CGPath基礎上 的Objective-C包裝類。

圖層蒙板

通過masksToBounds屬性,我們可以沿邊界裁剪圖形;通過 cornerRadius屬性,我們還可以設定一個圓角。但是有時候你希望展現的內容不是在一個矩形或圓角矩形。比如,你想展示一個有星形框架的圖片,又或者想讓一些古卷文字慢慢漸變成背景色,而不是一個突兀的邊界。

使用一個32位有alpha通道的png圖片通常是創建一個無矩形視圖最方便的方法, 你可以給它指定一個透明蒙板來實現。但是這個方法不能讓你以編碼的方式動態地 生成蒙板,也不能讓子圖層或子視圖裁剪成同樣的形狀。

CALayer有一個屬性叫做 mask可以解決這個問題。這個屬性本身就是個 CALayer類型,有和其他圖層一樣的繪制和布局屬性。它類似于一個子圖層,相對于父圖層(即擁有該屬性的圖層)布局,但是它卻不是一個普通的子圖層。不同于那些繪制在父圖層中的子圖層,mask 圖層定義了父圖層的部分可見區域。

mask圖層的 Color屬性是無關緊要的,真正重要的是圖層的輪廓。 mask 屬 性就像是一個餅干切割機, mask 圖層實心的部分會被保留下來,其他的則會被拋 棄。

如果 mask 圖層比父圖層要小,只有在 mask 圖層里面的內容才是它關心的, 除此以外的一切都會被隱藏起來。

把圖片和蒙板圖層作用在一起的效果.png
- (void)viewDidLoad
{
  [super viewDidLoad];
  //create mask layer
  CALayer *maskLayer = [CALayer layer];
  maskLayer.frame = self.layerView.bounds;
  UIImage *maskImage = [UIImage imageNamed:@"Cone.png"];
  maskLayer.contents = (__bridge id)maskImage.CGImage;
//apply mask to image layer 
  self.imageView.layer.mask = maskLayer;
}

CALayer蒙板圖層真正厲害的地方在于蒙板圖不局限于靜態圖。任何有圖層構成
的都可以作為 mask屬性,這意味著你的蒙板可以通過代碼甚至是動畫實時生成。

拉伸過濾

最后我們再來談談 minificationFiltermagnificationFilter屬性。總得來講,當我們視圖顯示一個圖片的時候,都應該正確地顯示這個圖片(意即:以正確的比例和正確的1:1像素顯示在屏幕上)。原因如下:

  • 能夠顯示最好的畫質,像素既沒有被壓縮也沒有被拉伸。
  • 能更好的使用內存,因為這就是所有你要存儲的東西。
  • 最好的性能表現,CPU不需要為此額外的計算。

不過有時候,顯示一個非真實大小的圖片確實是我們需要的效果。比如說一個頭像或是圖片的縮略圖,再比如說一個可以被拖拽和伸縮的大圖。這些情況下,為同一圖片的不同大小存儲不同的圖片顯得又不切實際。

當圖片需要顯示不同的大小的時候,有一種叫做拉伸過濾的算法就起到作用了。它作用于原圖的像素上并根據需要生成新的像素顯示在屏幕上。

事實上,重繪圖片大小也沒有一個統一的通用算法。這取決于需要拉伸的內容, 放大或是縮小的需求等這些因素。 CALayer 為此提供了三種拉伸過濾方法,他們 是:

  • kCAFilterLinear (雙線性濾波算法)
  • kCAFilterNearest (最近過濾)
  • kCAFilterTrilinear(三線性濾波算法)

minification(縮小圖片)和magnification(放大圖片)默認的過濾器都是 kCAFilterLinear,這個過濾器采用雙線性濾波算法,它在大多數情況下都表現良好。雙線性濾波算法通過對多個像素取樣最終生成新的值,得到一個平滑的表現不錯的拉伸。但是當放大倍數比較大的時候圖片就模糊不清了。

kCAFilterTrilinearkCAFilterLinear 非常相似,大部分情況下二者都看不出來有什么差別。但是,較雙線性濾波算法而言,三線性濾波算法存儲了多個 大小情況下的圖片(也叫多重貼圖),并三維取樣,同時結合大圖和小圖的存儲進而得到最后的結果。

這個方法的好處在于算法能夠從一系列已經接近于最終大小的圖片中得到想要的結果,也就是說不要對很多像素同步取樣。這不僅提高了性能,也避免了小概率因舍入錯誤引起的取樣失靈的問題

對于大圖來說,雙線性濾波和三線性濾波表現得更出色.png

kCAFilterNearest是一種比較武斷的方法。從名字不難看出,這個算法(也 叫最近過濾)就是取樣最近的單像素點而不管其他的顏色。這樣做非常快,也不會 使圖片模糊。但是,最明顯的效果就是,會使得壓縮圖片更糟,圖片放大之后也顯 得塊狀或是馬賽克嚴重。

對于沒有斜線的小圖來說,最近過濾算法要好很多.png

總的來說,對于比較小的圖或者是差異特別明顯,極少斜線的大圖,最近過濾算
法會保留這種差異明顯的特質以呈現更好的結果。但是對于大多數的圖尤其是有很
多斜線或是曲線輪廓的圖片來說,最近過濾算法會導致更差的結果。換句話說,線
性過濾保留了形狀,最近過濾則保留了像素的差異。

組透明

UIView有一個叫做alpha 的屬性來確定視圖的透明度。CALayer有一個等同的屬性叫做opacity ,這兩個屬性都是影響子層級的。也就是說,如果你給一個圖 層設置了opacity屬性,那它的子圖層都會受此影響。

iOS常見的做法是把一個控件的alpha值設置為0.5(50%)以使其看上去呈現為不可用狀態。對于獨立的視圖來說還不錯,但是當一個控件有子視圖的時候就有點奇怪了,圖展示了一個內嵌了UILabel的自定義UIButton;左邊是一個不透明的 按鈕,右邊是50%透明度的相同按鈕。我們可以注意到,里面的標簽的輪廓跟按鈕 的背景很不搭調。

右邊的漸隱按鈕中,里面的標簽清晰可見.png

這是由透明度的混合疊加造成的,當你顯示一個50%透明度的圖層時,圖層的每 個像素都會一半顯示自己的顏色,另一半顯示圖層下面的顏色。這是正常的透明度的表現。但是如果圖層包含一個同樣顯示50%透明的子圖層時,你所看到的視圖, 50%來自子視圖,25%來了圖層本身的顏色,另外的25%則來自背景色。

在我們的示例中,按鈕和表情都是白色背景。雖然他們都是50%的可見度,但是 合起來的可見度是75%,所以標簽所在的區域看上去就沒有周圍的部分那么透明。 所以看上去子視圖就高亮了,使得這個顯示效果都糟透了。

理想狀況下,當你設置了一個圖層的透明度,你希望它包含的整個圖層樹像一個 整體一樣的透明效果。你可以通過設置Info.plist文件中的 UIViewGroupOpacityYES來達到這個效果,但是這個設置會影響到這個應用,整個app可能會受到不良 影響。如果 UIViewGroupOpacity 并未設置,iOS 6和以前的版本會默認為NO(也許以后的版本會有一些改變)。

另一個方法就是,你可以設置CALayer的一個叫做shouldRasterize屬性來實現組透明的效果,如果它被設置為YES,在應用透明度之前,圖層及其子圖層都會被整合成一個整體的圖片,這樣就沒有透明度混合的問題了
為了啟用shouldRasterize屬性,我們設置了圖層的resterizationScale屬性。默認情況下,所有圖層拉伸都是1.0, 所以如果你 使用了shouldRasterize屬性,你就要確保你設置了rasterizationScale屬 性去匹配屏幕,以防止出現Retina屏幕像素化的問題。

@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@end
@implementation ViewController
- (UIButton *)customButton
{
  //create button
  CGRect frame = CGRectMake(0, 0, 150, 50);
  UIButton *button = [[UIButton alloc] initWithFrame:frame];
  button.backgroundColor = [UIColor whiteColor];
  button.layer.cornerRadius = 10;
  //add label
  frame = CGRectMake(20, 10, 110, 30);
  UILabel *label = [[UILabel alloc] initWithFrame:frame];
  label.text = @"Hello World";
 label.textAlignment = NSTextAlignmentCenter;
  [button addSubview:label];
  return button;
}

- (void)viewDidLoad
{
  [super viewDidLoad];
  //create opaque button
  UIButton *button1 = [self customButton];
  button1.center = CGPointMake(50, 150);
  [self.containerView addSubview:button1];
//create translucent button
UIButton *button2 = [self customButton];  
button2.center = CGPointMake(250, 150); button2.alpha = 0.5; [self.containerView addSubview:button2];
  //enable rasterization for the translucent button
  button2.layer.shouldRasterize = YES; //重點
  button2.layer.rasterizationScale = [UIScreen mainScreen].scale; // 重點
} 
@end
修正后的圖.png
總結

這一章介紹了一些可以通過代碼應用到圖層上的視覺效果,比如圓角,陰影和蒙板。我們也了解了拉伸過濾器和組透明。

iOS核心動畫高級技巧--目錄

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容