让View的转换 动起来！

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script> <script type="text/javascript"> </script> <script type="text/javascript"> </script>

去我的目录

上一篇我们实现了基于window-based模板的多View程序。用户可以方便的在多个View之间切换。今天，我们要让这个程序更酷！我们要为View之间的切换加入动画效果。举个例子，如下图所示：

这是如何实现的呢？

首先，让我们花点时间回顾一下上一篇中的一个函数

- (void) switchView {
    ... ...
    if( self.welcomeController.view.superview != nil ) {
        [welcomeController.view removeFromSuperview];
        [self.view insertSubview:foodlistController.view atIndex:0];
    }
    else {
        [foodlistController.view removeFromSuperview];
        [self.view insertSubview:welcomeController.view atIndex:0];
    }
}

这是实现View转换的地方。我们也是在这里加入动画的效果。

直接上代码：）

- (void) switchView {

   ... ...

   [UIView beginAnimations: @"Animation" context:nil];

   [UIView setAnimationDuration: 1.25];

   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

   if( self.welcomeController.view.superview != nil) {

      [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];

      [foodlistController viewWillAppear:YES];

      [welcomeController viewWillDisappear:YES];

      [welcomeController.view removeFromSuperview];

      [self.view insertSubview:foodlistController.view atIndex:0];

      [welcomeController viewDidDisappear:YES];

      [foodlistController viewDidAppear:YES];

   }

   else {

      [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];

      [welcomeController viewWillAppear:YES];

      [foodlistController viewWillDisappear:YES];

      [foodlistController.view removeFromSuperview];

      [self.view insertSubview:welcomeController.view atIndex:0];

      [foodlistController viewDidDisappear:YES];

      [welcomeController viewDidAppear:YES];

   }

   [UIView commitAnimations];

}

大家先看一下代码的第一行和最后一行，它们分别是beginAnimations 和commitAnimations 。这两句代码之间就是我们定义的animation block 。所有关于动画的定义和设置都必须在animation block 中完成。

下面是几条设置语句：

1）setAnimationDuration ：这里设置了整个动画过程持续的时间，单位是秒

2）setAnimationCurve ：这是设置了整个动画的速度。默认的是匀速动画。这里我们将它设置为EaseInOut ，意思是在开始和结束的时候动画速度较慢，在中间过程动画速度较快，这样的动画显得更加的平滑。

3）setAnimationTransition ：这里是设置动画的样式，iPhone 提供了4种不同的样式，分别是：UIViewAnimationTransitionFlipFromLeft, UIViewAnimationTransitionFlipFromRight, UIViewAnimationTransitionCurlUp, UIViewAnimationTransitionCurlDown （读者可以自己一一尝试）。注意到还使用了cache 。一般情况下我们都将此参数设为YES ，用来加速动画的渲染。

 

在设置完成后，我们还加了几条语句，如：

[welcomeController viewWillAppear:YES];

[foodlistController viewWillDisappear:YES];

... ...

[foodlistController viewDidDisappear:YES];

[welcomeController viewDidAppear:YES];

怎么理解这些语句的作用呢？我们回想一下之前提过的delegate 。Apple 将很多实现的细节隐藏起来，程序员不需要干涉其中的部分；但是Apple 又同时为程序员提供了足够的接口以满足我们特定的需要。这里的这四个函数就可以看作是这个功效：我们不需要去干涉具体的view转换的工作，我们只需要去控制4点：1）在这个view即将消失之前，我们需要做什么（viewWillDisappear ）；2）在这个view即将出现之前，需要做什么（viewWillAppear ）；3）在这个view已经消失之后，需要做什么（viewDidDisappear ）；4）在这个view已经出现之后，需要做什么（viewDidAppear ）。这四个函数给了我们程序员足够的能力完成我们特定的需要。

举个例子，如果当前的view 正在进行某个动画，当它即将消失的时候，我们希望能停止这个动画（因为已经对用户不可见了）。只需要在viewWillDisappear 中实现这个功能就可以了。

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

 

这样就好了么？还没。。。为了完成这个动画，我们需要加入一个新的Framework。这里的Framework类似于C++中的dll或者lib，Java中的Jar文件。我们看一眼目前Frameworks这个文件夹中的内容，这些都是在新建工程时默认添加的库。选中Framework文件夹，右键，add to Project，在Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator2.1.sdk/System/Library/Frameworks 中找到CoreGraphics.framework ，点击Add，将其添加入工程。添加时注意：

1）不要check "Copy items into destination group's folder (if needed)

2）在Reference Type: 中选择Relative to Current SDK

注：今后如果还需要添加其他的Framework，也必须遵循以上的设置。

 

好了！编译并运行吧！

 

下面来说另外一种添加动画的方式。先来看代码：

 

#import <QuartzCore/CAAnimation.h>

#import <QuartzCore/CAMediaTimingFunction.h>

... ...

 

if( self.welcomeController.view.superview != nil ) {
        [self.welcomeController.view removeFromSuperview];
        CATransition *animation = [CATransition animation];
        [animation setDuration:0.5f];
        [animation setType:kCATransitionPush];
        [animation setSubtype:kCATransitionFromRight];
        [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [[self.view layer] addAnimation:animation forKey:@"switchView"];
        [self.view insertSubview:self.foodlistController.view atIndex:0];

}

简单来看看这个函数里的内容，CATransition 这个类是用来实现layer transition的动画效果的。我们需要预先设置动画的时间（setDuration ），需要的动画类型（setType 和setSubtype ）。Apple为我们提供了4种主类型（setType ）和4种子类型（setSubtype ）[参考：http://developer.apple.com/documentation/GraphicsImaging/Reference/CATransition_class/Introduction/Introduction.html ]。最后，我们还需要设置动画的样式（setTimingFunction ），和前面讲到的setAnimationCurve 是一个概念。这里我们采用的是EaseInEaseOut ，同UIViewAnimationCurveEaseInOut 是一个意思。

 

注意，如果想使用CATransition ，需要包含QuartzCore.framework ，方法如前所述。

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>