iOS動畫進階(四)視覺效果

視覺效果

嗯，圓和橢圓還不錯，但如果是帶圓角的矩形呢？

我們現在能做到那樣了麼？

史蒂芬·喬布斯

我們在第三章『圖層幾何學』中討論了圖層的frame，第二章『寄宿圖』則討論了圖層的寄宿圖。但是圖層不僅僅可以是圖片或是顏色的容器；還有一系列內建的特性使得創造美麗優雅的令人深刻的界面元素成爲可能。在這一章，我們將會探索一些能夠通過使用CALayer屬性實現的視覺效果。

圓角

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

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

我們可以通過一個簡單的項目來演示這個效果。在Interface Builder中，我們放置一些視圖，他們有一些子視圖。而且這些子視圖有一些超出了邊界（如圖4.1）。你可能無法看到他們超出了邊界，因爲在編輯界面的時候，超出的部分總是被Interface Builder裁切掉了。不過，你相信我就好了 :)

圖4.1 兩個白色的大視圖，他們都包含了小一些的紅色視圖。

然後在代碼中，我們設置角的半徑爲20個點，並裁剪掉第一個視圖的超出部分（見清單4.1）。技術上來說，這些屬性都可以在Interface Builder的探測板中分別通過『用戶定義運行時屬性』和勾選『裁剪子視圖』(Clip Subviews)選擇框來直接設置屬性的值。不過，在這個示例中，代碼能夠表示得更清楚。圖4.2是運行代碼的結果

清單4.1 設置cornerRadius和masksToBounds

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView1;
@property (nonatomic, weak) IBOutlet UIView *layerView2;

@end

@implementation ViewController
- (void)viewDidLoad
{
  [super viewDidLoad];

  //set the corner radius on our layers
  self.layerView1.layer.cornerRadius = 20.0f;
  self.layerView2.layer.cornerRadius = 20.0f;

  //enable clipping on the second layer
  self.layerView2.layer.masksToBounds = YES;
}
@end

右圖中，紅色的子視圖沿角半徑被裁剪了

如你所見，右邊的子視圖沿邊界被裁剪了。

單獨控制每個層的圓角曲率也不是不可能的。如果想創建有些圓角有些直角的圖層或視圖時，你可能需要一些不同的方法。比如使用一個圖層蒙板（本章稍後會講到）或者是CAShapeLayer（見第六章『專用圖層』）。

圖層邊框

CALayer另外兩個非常有用屬性就是borderWidth和borderColor。二者共同定義了圖層邊的繪製樣式。這條線（也被稱作stroke）沿着圖層的bounds繪製，同時也包含圖層的角。

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

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

邊框是繪製在圖層邊界裏面的，而且在所有子內容之前，也在子圖層之前。如果我們在之前的示例中（清單4.2）加入圖層的邊框，你就能看到到底是怎麼一回事了（如圖4.3）.

清單4.2 加上邊框

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];

  //set the corner radius on our layers
  self.layerView1.layer.cornerRadius = 20.0f;
  self.layerView2.layer.cornerRadius = 20.0f;

  //add a border to our layers
  self.layerView1.layer.borderWidth = 5.0f;
  self.layerView2.layer.borderWidth = 5.0f;

  //enable clipping on the second layer
  self.layerView2.layer.masksToBounds = YES;
}

@end

圖4.3 給圖層增加一個邊框

仔細觀察會發現邊框並不會把寄宿圖或子圖層的形狀計算進來，如果圖層的子圖層超過了邊界，或者是寄宿圖在透明區域有一個透明蒙板，邊框仍然會沿着圖層的邊界繪製出來（如圖4.4）.

圖4.4 邊框是跟隨圖層的邊界變化的，而不是圖層裏面的內容

陰影

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

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

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

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

爲什麼要默認向上的陰影呢？儘管Core Animation是從圖層套裝演變而來（可以認爲是爲iOS創建的私有動畫框架），但是呢，它卻是在Mac OS上面世的，前面有提到，二者的Y軸是顛倒的。這就導致了默認的3個點位移的陰影是向上的。在Mac上，shadowOffset的默認值是陰影向下的，這樣你就能理解爲什麼iOS上的陰影方向是向上的了（如圖4.5）.

圖4.5 在iOS（左）和Mac OS（右）上shadowOffset的表現。

蘋果更傾向於用戶界面的陰影應該是垂直向下的，所以在iOS把陰影寬度設爲0，然後高度設爲一個正值不失爲一個做法。

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

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

圖4.6 大一些的陰影位移和角半徑會增加圖層的深度即視感

陰影裁剪

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

圖4.7 陰影是根據寄宿圖的輪廓來確定的

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

圖4.8 maskToBounds屬性裁剪掉了陰影和內容

從技術角度來說，這個結果是可以是可以理解的，但確實又不是我們想要的效果。如果你想沿着內容裁切，你需要用到兩個圖層：一個只畫陰影的空的外圖層，和一個用masksToBounds裁剪內容的內圖層。

如果我們把之前項目的右邊用單獨的視圖把裁剪的視圖包起來，我們就可以解決這個問題（如圖4.9）.

圖4.9 右邊，用額外的陰影轉換視圖包裹被裁剪的視圖

我們只把陰影用在最外層的視圖上，內層視圖進行裁剪。清單4.3是代碼實現，圖4.10是運行結果。

清單4.3 用一個額外的視圖來解決陰影裁切的問題

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView1;
@property (nonatomic, weak) IBOutlet UIView *layerView2;
@property (nonatomic, weak) IBOutlet UIView *shadowView;

@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];

  //set the corner radius on our layers
  self.layerView1.layer.cornerRadius = 20.0f;
  self.layerView2.layer.cornerRadius = 20.0f;

  //add a border to our layers
  self.layerView1.layer.borderWidth = 5.0f;
  self.layerView2.layer.borderWidth = 5.0f;

  //add a shadow to layerView1
  self.layerView1.layer.shadowOpacity = 0.5f;
  self.layerView1.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
  self.layerView1.layer.shadowRadius = 5.0f;

  //add same shadow to shadowView (not layerView2)
  self.shadowView.layer.shadowOpacity = 0.5f;
  self.shadowView.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
  self.shadowView.layer.shadowRadius = 5.0f;

  //enable clipping on the second layer
  self.layerView2.layer.masksToBounds = YES;
}

@end

圖4.10 右邊視圖，不受裁切陰影的陰影視圖。

shadowPath屬性

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

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

圖4.11 展示了同一寄宿圖的不同陰影設定。如你所見，我們使用的圖形很簡單，但是它的陰影可以是你想要的任何形狀。清單4.4是代碼實現。

圖4.11 用shadowPath指定任意陰影形狀

清單4.4 創建簡單的陰影形狀

@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圖層實心的部分會被保留下來，其他的則會被拋棄。（如圖4.12）

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

圖4.12 把圖片和蒙板圖層作用在一起的效果

我們將代碼演示一下這個過程，創建一個簡單的項目，通過圖層的mask屬性來作用於圖片之上。爲了簡便一些，我們用Interface Builder來創建一個包含UIImageView的圖片圖層。這樣我們就只要代碼實現蒙板圖層了。清單4.5是最終的代碼，圖4.13是運行後的結果。

清單4.5 應用蒙板圖層

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *imageView;
@end

@implementation ViewController

- (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;
}
@end

圖4.13 使用了mask之後的UIImageView

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

拉伸過濾

最後我們再來談談minificationFilter和magnificationFilter屬性。總得來講，當我們視圖顯示一個圖片的時候，都應該正確地顯示這個圖片（意即：以正確的比例和正確的1：1像素顯示在屏幕上）。原因如下：

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

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

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

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

• kCAFilterLinear
• kCAFilterNearest
• kCAFilterTrilinear

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

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

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

圖4.14 對於大圖來說，雙線性濾波和三線性濾波表現得更出色

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

圖4.15 對於沒有斜線的小圖來說，最近過濾算法要好很多

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

讓我們來實驗一下。我們對第三章的時鐘項目改動一下，用LCD風格的數字方式顯示。我們用簡單的像素字體（一種用像素構成字符的字體，而非矢量圖形）創造數字顯示方式，用圖片存儲起來，而且用第二章介紹過的拼合技術來顯示（如圖4.16）。

圖4.16 一個簡單的運用拼合技術顯示的LCD數字風格的像素字體

我們在Interface Builder中放置了六個視圖，小時、分鐘、秒鐘各兩個，圖4.17顯示了這六個視圖是如何在Interface Builder中放置的。如果每個都用一個淡出的outlets對象就會顯得太多了，所以我們就用了一個IBOutletCollection對象把他們和控制器聯繫起來，這樣我們就可以以數組的方式訪問視圖了。清單4.6是代碼實現。

清單4.6 顯示一個LCD風格的時鐘

@interface ViewController ()

@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *digitViews;
@property (nonatomic, weak) NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad]; //get spritesheet image
  UIImage *digits = [UIImage imageNamed:@"Digits.png"];

  //set up digit views
  for (UIView *view in self.digitViews) {
    //set contents
    view.layer.contents = (__bridge id)digits.CGImage;
    view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1.0);
    view.layer.contentsGravity = kCAGravityResizeAspect;
  }

  //start timer
  self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];

  //set initial clock time
  [self tick];
}

- (void)setDigit:(NSInteger)digit forView:(UIView *)view
{
  //adjust contentsRect to select correct digit
  view.layer.contentsRect = CGRectMake(digit * 0.1, 0, 0.1, 1.0);
}

- (void)tick
{
  //convert time to hours, minutes and seconds
  NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier: NSGregorianCalendar];
  NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
  
  NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];

  //set hours
  [self setDigit:components.hour / 10 forView:self.digitViews[0]];
  [self setDigit:components.hour % 10 forView:self.digitViews[1]];

  //set minutes
  [self setDigit:components.minute / 10 forView:self.digitViews[2]];
  [self setDigit:components.minute % 10 forView:self.digitViews[3]];

  //set seconds
  [self setDigit:components.second / 10 forView:self.digitViews[4]];
  [self setDigit:components.second % 10 forView:self.digitViews[5]];
}
@end

如圖4.18，這樣做的確起了效果，但是圖片看起來模糊了。看起來默認的kCAFilterLinear選項讓我們失望了。

圖4.18 一個模糊的時鐘，由默認的kCAFilterLinear引起

爲了能像圖4.19中那樣，我們需要在for循環中加入如下代碼：

view.layer.magnificationFilter = kCAFilterNearest;

圖4.19 設置了最近過濾之後的清晰顯示

組透明

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

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

圖4.20 右邊的漸隱按鈕中，裏面的標籤清晰可見

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

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

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

另一個方法就是，你可以設置CALayer的一個叫做shouldRasterize屬性（見清單4.7）來實現組透明的效果，如果它被設置爲YES，在應用透明度之前，圖層及其子圖層都會被整合成一個整體的圖片，這樣就沒有透明度混合的問題了（如圖4.21）。

爲了啓用shouldRasterize屬性，我們設置了圖層的rasterizationScale屬性。默認情況下，所有圖層拉伸都是1.0， 所以如果你使用了shouldRasterize屬性，你就要確保你設置了rasterizationScale屬性去匹配屏幕，以防止出現Retina屏幕像素化的問題。

當shouldRasterize和UIViewGroupOpacity一起的時候，性能問題就出現了（我們在第12章『速度』和第15章『圖層性能』將做出介紹），但是性能碰撞都本地化了（譯者注：這句話需要再翻譯）。

清單4.7 使用shouldRasterize屬性解決組透明問題

@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

圖4.21 修正後的圖

總結

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

在第五章，『變換』中，我們將會研究圖層變化和3D轉換。