Layer Programming with Quartz Core

Chapter 5.Layer Programming with Quartz Core
Quartz Core 框架就像是Leopard 桌面的Core Animation。Quartz Core提供了基本的类来管理UIView对象里面的层。这也用于创建二维对象的三维变换，会有惊人的动画和效果。

要使用Quartz Core框架，您将需要添加到您的Xcode项目。右键单击您的项目的框架文件夹，然后选择添加框架。导航到QuartzCore.framework文件夹，然后单击添加。

要找到Quartz Core框架，您可以浏览到或是手动/Developer/Platforms/iPhoneOS.platform或/Developer/Platforms/iPhoneSimulator.platform并找到你的SDK中框架文件夹。

5.1理解层
层是一个低级组件，可以在可显示的类里面找到。层像是铺在一个内容固定对象上的一个片。
他非常灵活的支持在一个对象上显示内容，可在屏幕上弯曲或扭曲内容等许多方面。从UIView衍生的类，每个对象都渲染他自己，他们的内容都是粘合的。


例它可以被当作透明;各有不同的内容，堆叠顶端彼此产生一个综合 的图象。如， UIImageView类包含的所有基本信息的二维图像的显示区域，分解和各项渲染图像的方法。图片本身是粘在父母UIView类的层上，就像在一个图片框架上。大多数最基本的层次表现就像一个单一的纸板，只是介绍了图像原样。层也可以包含多个层，


因为他们是灵活的，可以使用层操纵内容贴在他们上面。该层的类， CALayer ，控制这种灵活的支持，因为它是操纵的显示。如果您弯曲层，图像就和它一起弯曲。如果您旋转层，图像也会随着一起。你可以把层，添加动画，或旋转，扭曲，或缩放图片。对象坐在上方的层是完全无视它是如何被操纵，从而使您的应用程序继续与显示物体仿佛仍在二维对象。当用户看到的图像，但是，它已经转化为任何方向的层已被扭到。图层可以改变不仅仅是图像。显示输出的所有其他观点班章中涉及第3章和第10章还剩下最重要的一层。


要访问层，读取UIView类的 layer属性

CALayer *layer = myView.layer;

所有从UIView基础来的对象都继承了这个属性。这意味着你可以转换，缩放，旋转，甚至可以再navigation bars, tables, text boxes,等其它的view类上增加动画。

最重要的是要记住，每个UIView都有一个层，他们控制着他们的内容最终被显示在屏幕上的方式。

层都有一些通用的方法和属性来管理子层和执行渲染。这些方法可以让您“存储”若干不同层次的个别画面，是他们合作，全力为一个合成的屏幕图像。

单个层可以有很多子层。子层可以在最终屏幕渲染的时候被管理和缝合在一起。考虑的第一人称射击游戏。您的游戏可能包括一层负责游戏人物，一个层负责背景，和一个复杂head-up display（ HUD ） 。您可能为每一个专门设计一个UIView级和这四个层构成了游戏画面：

UIView *gameView = [ [ UIView alloc ] initWithFrame:
    [ [ UIScreen mainScreen ] applicationFrame ]
];

UIView *backgroundView = [ [ UIView alloc ] initWithFrame...
UIView *characterView = [ [ UIView alloc ] initWithFrame...
UIView *HUDView = [ [ UIView alloc ] initWithFrame...

你可以用CALayer中的addSublayer 方法来在gameView增加每个UIView中的层
#import <QuartzCore/QuartzCore.h>

CALayer *gameLayer = gameView.layer;
[ gameLayer addSublayer: backgroundView.layer ];
[ gameLayer addSublayer: characterView.layer ];
[ gameLayer addSublayer: HUDView.layer ];


当gameView物体在屏幕上显示时，所有三个层将合并渲染。每类负责自己的层，但是当gameLayer被画到屏幕上的时候，所有三个将合并在一起。

该gameView不是可以唯一添加的层。子层可以有自己的子层，这样整个有层次的体系才能被建立。例如，你可以向HUDView增加一个层，来显示HUD的组件。例如一个团队的标志。

UIImageView *teamLogoView = [ [ UIImageView alloc ] initWithImage: myTeamLogo ];
[ HUDView.layer addSublayer: teamLogoView.layer ];


每当HUDView层被渲染的时候，其它的所有层都将被渲染。

5.1.2 大小和位置
要改变一个已经被渲染的层的大小和位置可以设置layer的frame属性。Layer的frame属性在某种情况和windows，view的frame有相似之处。通过接受一个x/y的坐标来改变大小和位置。下面的例子设置teamLogoView层位置（150，100 ），其大小为50x75 ：

CGRect teamLogoFrame = CGRectMake(150.0, 100.0, 50.0, 75.0);
teamLogoView.layer.frame = teamLogoFrame;

另外，你可以通过设置position来调整一个层的位置而不改变它的大小。此属性接受CGPoint结构，从而确定在屏幕的什么位置显示。不像frame属性，position属性指定的是层的中间点，而不是左上角了。

CGPoint logoPosition = CGPointMake(75.0, 50.0);
teamLogoView.layer.position = logoPositin;
5.1.3管理和显示
除了增加层，CALayer类提供了一些不同的方法来插入，安排，并移除层。

当你使用addSublayer来添加一个子层的是，在把这个子层添加到父层层结构的最上层。所以它将会显示在任何现有层的上面。使用insertSublayer方法可以再层结构中插入层。

要在一个特殊的索引里面插入层，可以使用atIndex 参数。

[ gameLayer insertSublayer: HUDView.layer atIndex: 1 ];

要在另一个层的上面或者下面插入层，可以使用above 或者 below 参数

[ gameLayer insertSublayer: HUDView.layer below: backgroundView.layer ];
[ gameLayer insertSublayer: HUDView.layer above: characterView.layer ];

要把一个层从父层中删除，可以调用此层的removeFromSuperlayer来删除。

[ HUDView.layer removeFromSuperlayer ];

要用一个不同的层来替换一个已存在的层，可以使用replaceSublayer方法。

[ gameLayer replaceSublayer: backgroundView.layer with: newBackgroundView.layer ];

要把一个层留在父层的层结构中，但是不显示它，可以使用层的hidden属性。你可以使用下面的代码来隐藏HUDView显示的内容，而不用去删除它。

- (void) ToggleHUD {
    HUDView.layer.hidden = (HUDView.layer.hidden == NO) ? YES : NO;
}

5.1.4 渲染

当更新层，改变不能立即显示在屏幕上。这允许你私下对层做大量的修改，而所有的操作都完成时不必立即显示给用户。当所有的层都准备好从画时，可以调用setNeedsDisplay了。

[ gameLayer setNeedsDisplay ];

有时候，可能需要只有重绘的一部分层的内容。重绘整个屏幕可以减缓性能。重绘只有部分的屏幕，需要更新，请使用setNeedsDisplayInRect方法，通过在CGRect结构的区域更新：

CGRect teamLogoFrame = CGRectMake(150.0, 100.0, 50.0, 75.0);
[ gameLayer setNeedsDisplayInRect: teamLogoFrame ];


如果你是用的Core Graphics框架来执行渲染的话，你可以直接渲染Core Graphics的内容。
用renderInContext来做这件事。

CGContextRef myCGContext = UIGraphicsGetCurrentContext();
[ gameLayer renderInContext: myCGContext ];

5.1.5 变换
要在一个层中添加一个3D或仿射变换，可以分别设置层的transform或affineTransform属性，。在这章中，稍后您可以了解更多关于变换：

characterView.layer.transform = CATransform3DMakeScale(-1.0, -1.0, 1.0);

CGAffineTransform transform = CGAffineTransformMakeRotation(45.0);
backgroundView.layer.affineTransform = transform;

5.1.6 层动画
Quartz Core的能力不仅仅粘性层（sticky layer），而且是远远超出粘性层。它可用于用令人惊叹的3D纹理转换一个二维物体，可以用来产生美妙的变换。

第三章介绍了作为一种变换方法，怎样在两个UIView之间变换。你直接在一个层或者子层中应用了变换和动画。正如你还记得，在第3章，动画是为CATransition对象创建的。

层变换是一个实例CATransition类提供了一个方法使用Quartz Core的动画引擎来添加动画。这可以让开发者使用Quartz Core提供的高级3D效果，而不用大量的修改代码。当一个层被应用动画的时候，一个CATransition或CAAnimation对象是附在层上。然后调用Quartz Core来产生一个新线程，来接管动画中所有的图像处理。开发者仅仅需要在增加一个理想的动画来加强层变换的效果。

你可以用以下的例子代码来创建一个变换：

CATransition *animation = [[CATransition alloc] init];
animation.duration = 1.0;
animation.timingFunction = [ CAMediaTimingFunction
    functionWithName: kCAMediaTimingFunctionEaseIn ];
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromRight;


目前， iPhone的SDK提供了极为有限的变换类型，这些变换可以由用户创建。大约12名额外的变换，如页扭曲和缩放变换，是被Quartz Core框架支持的，但只限于使用在苹果公司自己的应用程序上面。



你可以通过创建一个CABasicAnimation对象来创建一个动画。下面的例子将创建了一个360度旋转层的动画：

CABasicAnimation *animation = [ CABasicAnimation
    animationWithKeyPath: @"transform" ];
animation.toValue = [ NSValue valueWithCATransform3D: CATransform3D
MakeRotation(3.1415, 0, 0, 1.0) ];
animation.duration = 2;
animation.cumulative = YES;
animation.repeatCount = 2;


一旦创建好以后，你就可以直接在层上应用动画或者变换了。

[ teamLogoView.layer addAnimation: animation forKey: @"animation" ];

5.1.7 变形
Quartz Core的渲染能力，使二维图像可以被自由操纵，就好像它是三维。图像可以在一个三维坐标系中以任意角度被旋转，缩放和倾斜。CATransform3D的一套方法提供的魔术般的变换都落后于苹果的Cover Flow技术（在第12章）和在iPhone中使用的其他美学效果。

iPhone的支持缩放，旋转，仿射，翻转（translation）的转变，等等。这本书只提供了对层变换的一个介绍。Core Animation 是一个很大的东西，另外有许多关于这一主题的书籍。

Note
欲了解更多有关创建动画的信息，请看Bill Dudney的Core Animation for Mac OS X and the iPhone。

层变换时在独自的曾是执行的，并且允许多变换在多层面上同时发生。Quartz Core框架使用CATransform3D 对象来进行变换。这个对象应用在view的层的上面，来执行弯曲和层的其它操作，从而实现一个理想的3D效果。当它被提交给用户的时候，程序将继续把它当作一个2D对象。下面的例子创建了一个变换，目的是旋转层：

CATransform3D myTransform;
myTransform = CATransform3DMakeRotation(angle, x, y, z);

该CATransform3DMakeRotation函数创建了一个转变，将在三维轴坐标系以任意弧度旋转层。x-y-z轴的有个确定的范围（介于-1 和+1之间） 。相应的坐标轴指定的值告诉系统在该轴上旋转。例如，如果X轴是设置为-1或1 ，该对象将的X轴的方向上旋转，这意味着将把它垂直旋转。把这些值看做是插入在图像每个坐标轴上的秸秆（Think of these values as inserting straws through the image for each axis.）。如果秸秆插过x轴，图像将沿着秸秆垂直旋转。您可以使用坐标轴角度值创建更复杂的旋转。。对于大多数的用途，但是，值介于-1和+1已经足够。

要水平（垂直）旋转45度，您可以使用下面的代码：

myTransform = CATransform3DMakeRotation(0.78, 1.0, 0.0, 0.0);

要在Y轴上旋转相同的值：
myTransform = CATransform3DMakeRotation(0.78, 0.0, 1.0, 0.0);


0.78 ，用在前面的例子，是由角度值经计算转化为弧度值。要把角度值转化为弧度值，可以使用一个简单的公式Mπ/180 。例如， 45π/180 = 45 （ 3.1415 ） / 180 = 0.7853 。如果你打算在你的程序里面一直都用角度值的话，你可以写一个简单的转化方法，以帮助保持您的代码是可以理解的：

double radians(float degrees) {
    return ( degrees * 3.14159265 ) / 180.0;
}

当你创建一个转换的时候，你将要调用这个方法：

myTransform = CATransform3DMakeRotation(radians(45.0), 0.0, 1.0, 0.0);

当变换（transformation）被创建好了以后，应用在你正在操作的层上。CALayer对象提供了一个transform属性来连接转换。层将执行分配给transform属性的转换：

imageView.layer.transform = myTransform;

当对象被显示后，将会显示应用到它的转换效果。在你的代码中，你任然把它当做是个2D对象。但是它根据提供的转换类型来渲染。

5.1.8. BounceDemo: Layer Fun

这个例子将创建两个带有图片的层，两个图片下载自互联网。他们将随后attaches to a view controller，然后他们就很容易通过后来的计时器操作。计时器调整每个层在屏幕上的位置，并增加动画。这段代码是一个良好的，功能引入的好例子。它可以帮助你在你的程序里建立自己的层。如图所示，图5-1 。




你可以编译Example 5.1到Example 5.5所示的代码程序。用SDK创建一个叫BounceDemo的view-based application的工程。如果你想看看一个对象是怎样从零开始被创建的，一定要删除Interface Builder自动生成的代码。

Example 5-1. BouceDemo application delegate prototypes (BounceDemoAppDelegate.h)
#import <UIKit/UIKit.h>

@class BounceDemoViewController;

@interface BounceDemoAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    BounceDemoViewController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet BounceDemoViewController *viewController;

@end

                                          

Example 5-2. BouceDemo application delegate (BounceDemoAppDelegate.m)
#import "BounceDemoAppDelegate.h"
#import "BounceDemoViewController.h"

@implementation BounceDemoAppDelegate

@synthesize window;
@synthesize viewController;


- (void)applicationDidFinishLaunching:(UIApplication *)application {
    CGRect screenBounds = [ [ UIScreen mainScreen ] applicationFrame ];

    self.window = [ [ [ UIWindow alloc ] initWithFrame: screenBounds ]
        autorelease
    ];

    viewController = [ [ BounceDemoViewController alloc ] init ];

    [ window addSubview: viewController.view ];
    [ window makeKeyAndVisible ];
}

- (void)dealloc {
    [ viewController release ];
    [ window release ];
    [ super dealloc ];
}

@end

Example 5-3. BouceDemo view controller prototypes (BounceDemoViewController.h)
#import <UIKit/UIKit.h>

@interface BounceDemoViewController : UIViewController {
    UIImageView *image1, *image2;
    CGPoint directionImage1, directionImage2;
    NSTimer *timer;
}
- (void) handleTimer: (NSTimer *) timer;
@end

Example 5-4. BouceDemo view controller (BounceDemoViewController.m)
#import "BounceDemoViewController.h"
#import <QuartzCore/QuartzCore.h>

@implementation BounceDemoViewController

- (id)init {
    self = [ super init ];
    if (self != nil) {
        UIImage *image;
        NSURL *url;

        url = [ NSURL URLWithString:
               @"http://www.zdziarski.com/demo/1.png" ];
        image = [ UIImage imageWithData: [ NSData dataWithContentsOfURL: url ] ];
        image1 = [ [ UIImageView alloc ] initWithImage: image ];
        directionImage1 = CGPointMake(-1.0, -1.0);
        image1.layer.position = CGPointMake((image.size.width / 2)+1,
                                          (image.size.width / 2)+1);

        url = [ NSURL URLWithString: @"http://www.zdziarski.com/demo/2s.png" ];
        image = [ UIImage imageWithData: [ NSData dataWithContentsOfURL: url ] ];
        image2 = [ [ UIImageView alloc ] initWithImage: image ];
        directionImage2 = CGPointMake(1.0, 1.0);
        image2.layer.position = CGPointMake((image.size.width / 2)+1,
                                          (image.size.width / 2)+1);

        [ self.view.layer addSublayer: image2.layer ];
        [ self.view.layer addSublayer: image1.layer ];
    }
    return self;
}

- (void)loadView {
    [ super loadView ];
}

- (void)viewDidLoad {
    [ super viewDidLoad ];

    timer = [ NSTimer scheduledTimerWithTimeInterval: 0.01
                                              target: self
                                            selector: @selector(handleTimer:)
                                            userInfo: nil
                                             repeats: YES
             ];

    CABasicAnimation *anim1 =
        [ CABasicAnimation animationWithKeyPath: @"transform" ];
    anim1.toValue = [ NSValue valueWithCATransform3D:
        CATransform3DMakeRotation(3.1415, 1.0, 0, 0)
    ];

    anim1.duration = 2;
    anim1.cumulative = YES;
    anim1.repeatCount = 1000;
    [ image1.layer addAnimation: anim1 forKey: @"transformAnimation" ];
}

- (void)didReceiveMemoryWarning {
    [ super didReceiveMemoryWarning ];
}

- (void)dealloc {
    [ timer invalidate ];
    [ image1 release ];
    [ image2 release ];
    [ super dealloc ];
}

- (void) handleTimer: (NSTimer *) timer {
    CGSize size;
    CGPoint origin;

   
    size = [ image1 image ].size;
    if (image1.layer.position.x <=
        ( (size.width / 2) + 1) - self.view.frame.origin.x)
        directionImage1.x = 1.0;
    if (image1.layer.position.x + (size.width / 2) + 1 >=
        (self.view.frame.size.width - self.view.frame.origin.x) - 1)
        directionImage1.x = -1.0;
    if (image1.layer.position.y <=
        ( (size.height / 2) + 1) - self.view.frame.origin.y)
        directionImage1.y = 1.0;
    if (image1.layer.position.y + (size.height / 2) + 1 >=
        (self.view.frame.size.height - self.view.frame.origin.y) - 1)
        directionImage1.y = -1.0;
    origin = image1.layer.position;
    origin.x += directionImage1.x;
    origin.y += directionImage1.y;
    image1.layer.position = origin;

   
    size = [ image2 image ].size;
    if (image2.layer.position.x <=
        ( (size.width / 2) + 1) - self.view.frame.origin.x)
        directionImage2.x = 1.0;
    if (image2.layer.position.x + (size.width / 2) + 1
        >= (self.view.frame.size.width - self.view.frame.origin.x) - 1)
        directionImage2.x = -1.0;
    if (image2.layer.position.y <=
        ( (size.height / 2) + 1) - self.view.frame.origin.y)
        directionImage2.y = 1.0;
    if (image2.layer.position.y + (size.height / 2) + 1 >=
        (self.view.frame.size.height - self.view.frame.origin.y) - 1)
        directionImage2.y = -1.0;
    origin = image2.layer.position;
    origin.x += directionImage2.x;
    origin.y += directionImage2.y;
    image2.layer.position = origin;

    [ self.view setNeedsDisplayInRect: image1.layer.frame ];
    [ self.view setNeedsDisplayInRect: image2.layer.frame ];
}
@end

                                          

Example 5-5. BouceDemo main (main.m)
#import <UIKit/UIKit.h>

int main(int argc, char *argv[]) {

    NSAutoreleasePool * pool = [ [ NSAutoreleasePool alloc ] init ];
    int retVal = UIApplicationMain(argc, argv, nil, @"BounceDemoAppDelegate");
    [ pool release ];
    return retVal;
}

5.1.9.它是怎么运行的：
这里告诉你bounce demo是怎样运行的：

1.当应用程序被加载时，其BounceDemoAppDelegate类获得applicationDidFinishLaunching方法的通知。该方法构造窗口和控制器实例。

2. 视图控制器（view controller）的初始化方法创建两个UIImageView对象并载入从互联网上下载的图像。这些视图对象上的层将作为子层添加到主视图的层上。

3.当视图被加载时，viewDidLoad方法就被调用，并创建一个计时器。计时器的目标， handleTimer ，当每次被调用的时候就调整每个层的位置一个像素，使图像在外观上看起来像是在屏幕是跳动。viewDidLoad还创建了两个动画，一个层垂直翻转和另一个横向翻动。动画被添加到目标对象上，并自动运行。