iOS Core Animation Advanced Techniques-視覺效果

標籤：

上三章節：

1. 圖層樹
2. 圖層的寄宿圖
3. 圖層幾何學

這篇隨筆主要介紹有關圖層視覺效果。

圓角：

• conrnerRadius屬性
• 該屬性控制CALayer圖層角的曲率，預設0.0（直角）
• 該屬性控制的曲率值隻影響背景顏色而不影響背景圖片或子圖層，可以通過設定masksToBounds屬性為YES截取圖層裡面的所有東西；
• 使用例子：
• myView.layer.cornerRadius=20.0f;
• myView.layer.masksToBounds=YES;

圖層邊框：

• borderWidth與borderColor屬性

1. 兩個屬性共同定義圖層邊的繪製樣式，沿著圖層的bounds繪製，包含圖層的角
2. 邊框繪製在圖層邊界裡，且在所有子內容前

• borderWidth
  • 以點為單位，預設0.0
• borderColor
  • 定義邊框顏色，預設黑色
  • 是CGColorRef類型
  • 使用例子：
  • myView.layer.cornerRadius=20.0f;
  • myView.layer.masksToBounds=YES;
  • myView.layer.borderWidth=5.0f;
  • myView.layer.borderColor=[UIColor blueColor].CGColor;

陰影：

• shadowOpacity屬性
  • 預設0.0（不可見），最大範圍1.0（完全不透明）之間的浮點數
  • 可以顯示在任意圖層下
• 通過以下3個屬性改動陰影的表現：
  • shadowColor
    • 控制陰影顏色，預設黑色，屬於CGColorRef類型
  • shadowOffset
    • 控制陰影的方向和距離，屬於CGSize類型，預設{0,-3}，即陰影相對Y軸有3個點的向上位移
  • shadowRadius
    • 控制陰影的模糊度，值越大越模糊

陰影裁剪：

• 陰影繪製不同於邊框繪製，陰影繪製是沿自圖層內容（寄宿圖，子視圖）的外形，而不是根據邊界與角半徑決定
• 當陰影與裁剪一起使用時會發生衝突：陰影通常在Layer邊界之外，若此時開啟masksToBounds屬性，圖層中突出的內容會被剪掉，那麼整個圖層設定的陰影製作效果將會消失
• 解決方案：使用兩個圖層，一個只畫陰影的空的外圖層，一個用masksToBounds裁剪內容的內圖層，使用例子：
  • //myView與myShadowView的frame屬性應該設定為一樣
  • myView.layer.cornerRadius=20.0f;
  • myView.layer.masksToBounds=YES;
  • myShadowView.layer.shadowOpacity=0.5f;
  • myShadowView.layer.shadowOffset=CGSizeMake(0.0f,5.0f);
  • myShadowView.layer.shadowRadius=5.0f;

shadowPath屬性：

• 單獨於圖層形狀之外指定陰影形狀（只要能構造得出的CGPath路徑的形狀），是一個CGPathRef類型（一個指向CGPath的指標）
  • 使用例子：
  • myView.layer.shadowOpacity=0.5f;
  • CGMutablePathRef squarePath=CGPathCreateMutable();
  • CGPathAddRect(squarePath,NULL,myView.bounds);
  • myView.layer.shadowPath=squarePath;
  • CGPathRelease(squarePath);

圖層蒙板：

• mask屬性
  • 屬於CALayer類型，有像其他正常圖層一樣的繪製與布局屬性，類似一個子圖層，相對於父圖層布局，但卻不是一個普通子圖層，該圖層定義了父圖層的部分可見地區
  • 通過該屬性可以讓圖層的寄宿圖展現一個自己想展現的形狀內容
  • 該屬性就像一塊不透明黑色木板，屬性圖層內容就像該不透明木板中的透明部分，當覆蓋在擁有它這個屬性的父圖層上時，父圖層只顯示蒙板的透明部分
  • CALayer蒙板圖層真正厲害的地方在於蒙板圖不局限於靜態圖,任何有圖層構成的都可以作為mask屬性，這意味著你的蒙板可以通過代碼甚至是動畫即時產生。
    • 使用例子：
    • CALayer *maskLayer=[CALayer layer];
    • maskLayer.frame=myImageView.bounds;
    • UIImage *maskImage=[UIImage imageNamed:@"Cone.png"];
    • maskLayer.contents=(__bridge id)maskImage.CGImage;
    • myImageView.layer.mask=maskLayer;

展開過濾：

• minificationFilter(縮小圖片)和magnificationFilter（放大圖片）屬性
• 作用於圖片需要顯示不同的大小的時候，作用於原圖的像素上並根據需要產生新的像素顯示於螢幕
• CALayer提供三種展開過濾方法：
  • kCAFilterLinear
    • 當放大倍數比較大時圖片會模糊
  • kCAFilterNearest
    • 速度快，圖片不會模糊，但是會壓縮圖片，放大後會顯示塊狀
  • kCAFilterTrilinear
    • 效能高，失真少
  • minification與magnification預設過濾器都是kCAFilterLinear

組透明：

• shouldRasterize屬性
  • CALayer的opacity屬性控製圖層的透明度，對應UIView上的alpha屬性，都是會影響子層級
  • 值得注意的是CALayer的opacity屬性設定透明度後會讓父圖層與子圖層發生層級輪廓明顯的問題
  • 可以通過設定CALayer的shouldRasterize屬性為YES實現組透明效果解決透明度混合導致的父子輪廓明顯
    • • 使用例子：
      • CGRect frame=CGRectMake(0,0,150,50);
      • UIButton *button=[[UIButton alloc]initWithFrame:frame];
      • button.backgroundColor=[UIColor whiteColor];
      • button.layer.cornerRadius=10;
      • frame=CGRectMake(20,10,110,30);
      • UILabel *label=[[UILabel alloc]initWithFrame:frame];
      • [email protected]"Hello World";
      • label.textAlignment=NSTextAlignmentCenter;
      • [button addSubview:label];
      • button.layer.shouldRasterize=YES;
      • button.layer.rasterizationScale=[UIScreen mainScreen].scale;

 

iOS Core Animation Advanced Techniques-視覺效果