iOS核心動畫高級技巧 - 8_ZenDei技術網路在線

iOS核心動畫高級技巧 - 1 iOS核心動畫高級技巧 - 2 iOS核心動畫高級技巧 - 3 iOS核心動畫高級技巧 - 4 iOS核心動畫高級技巧 - 5 iOS核心動畫高級技巧 - 6 iOS核心動畫高級技巧 - 7 15. 圖層性能圖層性能要更快性能，也要做對正確的事情。 ——Steph ...

15. 圖層性能

圖層性能

要更快性能，也要做對正確的事情。 ——Stephen R. Covey

在第14章『圖像IO』討論如何高效地載入和顯示圖像，通過視圖來避免可能引起動畫幀率下降的性能問題。在最後一章，我們將著重圖層樹本身，以發掘最好的性能。

15.1 隱式繪製

隱式繪製

寄宿圖可以通過Core Graphics直接繪製，也可以直接載入一個圖片文件並賦值給contents屬性，或事先繪製一個屏幕之外的CGContext上下文。在之前的兩章中我們討論了這些場景下的優化。但是除了常見的顯式創建寄宿圖，你也可以通過以下三種方式創建隱式的：1，使用特性的圖層屬性。2，特定的視圖。3，特定的圖層子類。

瞭解這個情況為什麼發生何時發生是很重要的，它能夠讓你避免引入不必要的軟體繪製行為。

文本

CATextLayer和UILabel都是直接將文本繪製在圖層的寄宿圖中。事實上這兩種方式用了完全不同的渲染方式：在iOS 6及之前，UILabel用WebKit的HTML渲染引擎來繪製文本，而CATextLayer用的是Core Text.後者渲染更迅速，所以在所有需要繪製大量文本的情形下都優先使用它吧。但是這兩種方法都用了軟體的方式繪製，因此他們實際上要比硬體加速合成方式要慢。

一個開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的iOS交流群：1012951431，分享BAT,阿裡面試題、面試經驗，討論技術，大家一起交流學習成長！希望幫助開發者少走彎路。

不論如何，儘可能地避免改變那些包含文本的視圖的frame，因為這樣做的話文本就需要重繪。例如，如果你想在圖層的角落裡顯示一段靜態的文本，但是這個圖層經常改動，你就應該把文本放在一個子圖層中。

光柵化

在第四章『視覺效果』中我們提到了CALayer的shouldRasterize屬性，它可以解決重疊透明圖層的混合失靈問題。同樣在第12章『速度的曲調』中，它也是作為繪製複雜圖層樹結構的優化方法。

啟用shouldRasterize屬性會將圖層繪製到一個屏幕之外的圖像。然後這個圖像將會被緩存起來並繪製到實際圖層的contents和子圖層。如果有很多的子圖層或者有複雜的效果應用，這樣做就會比重繪所有事務的所有幀划得來得多。但是光柵化原始圖像需要時間，而且還會消耗額外的記憶體。

當我們使用得當時，光柵化可以提供很大的性能優勢（如你在第12章所見），但是一定要避免作用在內容不斷變動的圖層上，否則它緩存方面的好處就會消失，而且會讓性能變的更糟。

為了檢測你是否正確地使用了光柵化方式，用Instrument查看一下Color Hits Green和Misses Red項目，是否已光柵化圖像被頻繁地刷新（這樣就說明圖層並不是光柵化的好選擇，或則你無意間觸發了不必要的改變導致了重繪行為）。

15.2 離屏渲染

離屏渲染

當圖層屬性的混合體被指定為在未預合成之前不能直接在屏幕中繪製時，屏幕外渲染就被喚起了。屏幕外渲染並不意味著軟體繪製，但是它意味著圖層必須在被顯示之前在一個屏幕外上下文中被渲染（不論CPU還是GPU）。圖層的以下屬性將會觸發屏幕外繪製：

圓角（當和maskToBounds一起使用時）
圖層蒙板
陰影

屏幕外渲染和我們啟用光柵化時相似，除了它並沒有像光柵化圖層那麼消耗大，子圖層並沒有被影響到，而且結果也沒有被緩存，所以不會有長期的記憶體占用。但是，如果太多圖層在屏幕外渲染依然會影響到性能。

有時候我們可以把那些需要屏幕外繪製的圖層開啟光柵化以作為一個優化方式，前提是這些圖層並不會被頻繁地重繪。

對於那些需要動畫而且要在屏幕外渲染的圖層來說，你可以用CAShapeLayer，contentsCenter或者shadowPath來獲得同樣的表現而且較少地影響到性能。

CAShapeLayer

cornerRadius和maskToBounds獨立作用的時候都不會有太大的性能問題，但是當他倆結合在一起，就觸發了屏幕外渲染。有時候你想顯示圓角並沿著圖層裁切子圖層的時候，你可能會發現你並不需要沿著圓角裁切，這個情況下用CAShapeLayer就可以避免這個問題了。

你想要的只是圓角且沿著矩形邊界裁切，同時還不希望引起性能問題。其實你可以用現成的UIBezierPath的構造器+bezierPathWithRoundedRect:cornerRadius:（見清單15.1）.這樣做並不會比直接用cornerRadius更快，但是它避免了性能問題。

清單15.1 用CAShapeLayer畫一個圓角矩形

#import "ViewController.h"
#import 

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create shape layer
    CAShapeLayer *blueLayer = [CAShapeLayer layer];
    blueLayer.frame = CGRectMake(50, 50, 100, 100);
    blueLayer.fillColor = [UIColor blueColor].CGColor;
    blueLayer.path = [UIBezierPath bezierPathWithRoundedRect:
    CGRectMake(0, 0, 100, 100) cornerRadius:20].CGPath;
    
    //add it to our view
    [self.layerView.layer addSublayer:blueLayer];
}
@end

可伸縮圖片

另一個創建圓角矩形的方法就是用一個圓形內容圖片並結合第二章『寄宿圖』提到的contensCenter屬性去創建一個可伸縮圖片（見清單15.2）.理論上來說，這個應該比用CAShapeLayer要快，因為一個可拉伸圖片只需要18個三角形（一個圖片是由一個3*3網格渲染而成），然而，許多都需要渲染成一個順滑的曲線。在實際應用上，二者並沒有太大的區別。

清單15.2 用可伸縮圖片繪製圓角矩形

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create layer
    CALayer *blueLayer = [CALayer layer];
    blueLayer.frame = CGRectMake(50, 50, 100, 100);
    blueLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.0, 0.0);
    blueLayer.contentsScale = [UIScreen mainScreen].scale;
    blueLayer.contents = (__bridge id)[UIImage imageNamed:@"Circle.png"].CGImage;
    //add it to our view
    [self.layerView.layer addSublayer:blueLayer];
}
@end

使用可伸縮圖片的優勢在於它可以繪製成任意邊框效果而不需要額外的性能消耗。舉個例子，可伸縮圖片甚至還可以顯示出矩形陰影的效果。

shadowPath

在第2章我們有提到shadowPath屬性。如果圖層是一個簡單幾何圖形如矩形或者圓角矩形（假設不包含任何透明部分或者子圖層），創建出一個對應形狀的陰影路徑就比較容易，而且Core Animation繪製這個陰影也相當簡單，避免了屏幕外的圖層部分的預排版需求。這對性能來說很有幫助。

如果你的圖層是一個更複雜的圖形，生成正確的陰影路徑可能就比較難了，這樣子的話你可以考慮用繪圖軟體預先生成一個陰影背景圖。

15.3 混合和過度繪製

混合和過度繪製

在第12章有提到，GPU每一幀可以繪製的像素有一個最大限制（就是所謂的fill rate），這個情況下可以輕易地繪製整個屏幕的所有像素。但是如果由於重疊圖層的關係需要不停地重繪同一區域的話，掉幀就可能發生了。

GPU會放棄繪製那些完全被其他圖層遮擋的像素，但是要計算出一個圖層是否被遮擋也是相當複雜並且會消耗處理器資源。同樣，合併不同圖層的透明重疊像素（即混合）消耗的資源也是相當客觀的。所以為了加速處理進程，不到必須時刻不要使用透明圖層。任何情況下，你應該這樣做：

給視圖的backgroundColor屬性設置一個固定的，不透明的顏色
設置opaque屬性為YES

這樣做減少了混合行為（因為編譯器知道在圖層之後的東西都不會對最終的像素顏色產生影響）並且計算得到了加速，避免了過度繪製行為因為Core Animation可以捨棄所有被完全遮蓋住的圖層，而不用每個像素都去計算一遍。

如果用到了圖像，儘量避免透明除非非常必要。如果圖像要顯示在一個固定的背景顏色或是固定的背景圖之前，你沒必要相對前景移動，你只需要預填充背景圖片就可以避免運行時混色了。

如果是文本的話，一個白色背景的UILabel（或者其他顏色）會比透明背景要更高效。

最後，明智地使用shouldRasterize屬性，可以將一個固定的圖層體系摺疊成單張圖片，這樣就不需要每一幀重新合成了，也就不會有因為子圖層之間的混合和過度繪製的性能問題了。

15.4 減少圖層數量

減少圖層數量

初始化圖層，處理圖層，打包通過IPC發給渲染引擎，轉化成OpenGL幾何圖形，這些是一個圖層的大致資源開銷。事實上，一次性能夠在屏幕上顯示的最大圖層數量也是有限的。

確切的限制數量取決於iOS設備，圖層類型，圖層內容和屬性等。但是總得說來可以容納上百或上千個，下麵我們將演示即使圖層本身並沒有做什麼也會遇到的性能問題。

裁切

在對圖層做任何優化之前，你需要確定你不是在創建一些不可見的圖層，圖層在以下幾種情況下回事不可見的：

圖層在屏幕邊界之外，或是在父圖層邊界之外。
完全在一個不透明圖層之後。
完全透明

Core Animation非常擅長處理對視覺效果無意義的圖層。但是經常性地，你自己的代碼會比Core Animation更早地想知道一個圖層是否是有用的。理想狀況下，在圖層對象在創建之前就想知道，以避免創建和配置不必要圖層的額外工作。

舉個例子。清單15.3 的代碼展示了一個簡單的滾動3D圖層矩陣。這看上去很酷，尤其是圖層在移動的時候（見圖15.1），但是繪製他們並不是很麻煩，因為這些圖層就是一些簡單的矩形色塊。

清單15.3 繪製3D圖層矩陣

#import "ViewController.h"
#import 

#define WIDTH 10
#define HEIGHT 10
#define DEPTH 10
#define SIZE 100
#define SPACING 150
#define CAMERA_DISTANCE 500

@interface ViewController ()

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //set content size
    self.scrollView.contentSize = CGSizeMake((WIDTH - 1)*SPACING, (HEIGHT - 1)*SPACING);

    //set up perspective transform
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1.0 / CAMERA_DISTANCE;
    self.scrollView.layer.sublayerTransform = transform;

    //create layers
    for (int z = DEPTH - 1; z >= 0; z--) {
        for (int y = 0; y < HEIGHT; y++) {
            for (int x = 0; x < WIDTH; x++) {
                //create layer
                CALayer *layer = [CALayer layer];
                layer.frame = CGRectMake(0, 0, SIZE, SIZE);
                layer.position = CGPointMake(x*SPACING, y*SPACING);
                layer.zPosition = -z*SPACING;
                //set background color
                layer.backgroundColor = [UIColor colorWithWhite:1-z*(1.0/DEPTH) alpha:1].CGColor;
                //attach to scroll view
                [self.scrollView.layer addSublayer:layer];
            }
        }
    }
    
    //log
    NSLog(@"displayed: %i", DEPTH*HEIGHT*WIDTH);
}
@end

15.5 總結

總結

本章學習了使用Core Animation圖層可能遇到的性能瓶頸，並討論瞭如何避免或減小壓力。你學習瞭如何管理包含上千虛擬圖層的場景（事實上只創建了幾百個）。同時也學習了一些有用的技巧，選擇性地選取光柵化或者繪製圖層內容在合適的時候重新分配給CPU和GPU。這些就是我們要講的關於Core Animation的全部了（至少可以等到蘋果發明什麼新的玩意兒）。