iOS-Core-Animation之四----視覺效果

>嗯,圓和橢圓還不錯,但如果是帶圓角的矩形呢?

>我們現在能做到那樣了么?

>史蒂芬·喬布斯

我們在第三章『圖層幾何學』中討論了圖層的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`

```objective-c

@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加上邊框

```objective-c

@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用一個額外的視圖來解決陰影裁切的問題

```objective-c

@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創建簡單的陰影形狀

```objective-c

@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應用蒙板圖層

```objective-c

@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風格的時鐘

```objective-c

@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循環中加入如下代碼:

```objective-c

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`屬性解決組透明問題

```objective-c

@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轉換。

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

推薦閱讀更多精彩內容