CATransition的动画效果类型及实现方法

来源：http://hi.baidu.com/bunsman/blog/item/691c954e922ee610b3de05bc.html

实现iphone漂亮的动画效果主要有两种方法，一种是UIView层面的，一种是使用CATransition进行更低层次的控制，

第一种是UIView，UIView方式可能在低层也是使用CATransition进行了封装，它只能用于一些简单的、常用的效果展现，这里写一个常用的示例代码，供大家参考。

[UIView beginAnimations:@"Curl"context:nil];//动画开始

[UIView setAnimationDuration:0.75];

[UIView setAnimationDelegate:self];

[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myview cache:YES];

[myview removeFromSuperview];

[UIView commitAnimations];

第二种方式相对复杂一些，但如果更好的进行控制，还是使用这种方法吧，基本使用方法可以看一下如下例子：

CATransition *animation = [CATransition animation];

[animation setDuration:1.25f];

[animation setTimingFunction:[CAMediaTimingFunction

functionWithName:kCAMediaTimingFunctionEaseIn]];

[animation setType:kCATransitionReveal];

[animation setSubtype: kCATransitionFromBottom];

[self.view.layer addAnimation:animation forKey:@"Reveal"];

这里使用了setType与setSubtype组合，这使用个比较保险，因为他的参数就是官方API里定义的，他们的参数说明可以参考如下（默认类型是淡入淡出类型。）：

setType:可以返回四种类型：

kCATransitionFade       淡出

kCATransitionMoveIn  覆盖原图

kCATransitionPush       推出

kCATransitionReveal底部显出来

setSubtype:也可以有四种类型：

kCATransitionFromRight；

kCATransitionFromLeft(默认值)

kCATransitionFromTop；

kCATransitionFromBottom

还有一种设置动画类型的方法，不用setSubtype，只用setType

 

[animation setType:@"suckEffect"];

这里的suckEffect就是效果名称，可以用的效果主要有：

pageCurl               向上翻一页

pageUnCurl             向下翻一页

rippleEffect             滴水效果

suckEffect 收缩效果，如一块布被抽走

cube                   立方体效果

oglFlip              上下翻转效果

最后再给出一种常用代码供大家参考。

示例代码一：

// Curl the image up or down

CATransition *animation = [CATransition animation];

[animation setDuration:0.35];

[animation setTimingFunction:UIViewAnimationCurveEaseInOut];

if (!curled){

 //animation.type = @"mapCurl";

 animation.type = @"pageCurl";

 animation.fillMode = kCAFillModeForwards;

 animation.endProgress = 0.99;

} else {

 //animation.type = @"mapUnCurl";

 animation.type = @"pageUnCurl";

 animation.fillMode = kCAFillModeBackwards;

 animation.startProgress = 0.01;

}

[animation setRemovedOnCompletion:NO];

[view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

[view addAnimation:animation forKey"pageCurlAnimation"];

// Disable user interaction where necessary

if (!curled) {

 

} else {

 

}

urled = !curled;

示例代码二：

头部导入： #import <QuartzCore/QuartzCore.h>

- (void) startAction:(id) sender{

 // 定义动画

 CATransition *animation = [CATransition animation];

 animation.delegate = self;

 animation.duration =1.0f;

 animation.timingFunction = UIViewAnimationCurveEaseInOut; 

 //可根据需要，设置type和subtype属性产生不同的动画效果

 

 //animation.type = kCATransitionPush;

 //animation.type = kCATransitionMoveIn;

 //animation.type = kCATransitionReveal;

 //animation.type = kCATransitionFade;

 

 //animation.subtype = kCATransitionPush;

 //animation.subtype = kCATransitionMoveIn;

 //animation.subtype = kCATransitionReveal;

 //animation.subtype = kCATransitionFade;

 

 switch ([(UISegmentedControl *)self.navigationItem.titleView selectedSegmentIndex]) {

  case 0:

   animation.type = @"rippleEffect";

   //animation.type = @"cube";  //立方体翻转

   //animation.type = @"oglFlip";  //层翻转

   //animation.type = @"cameraIrisHollowClose";

   //animation.type = @"cameraIrisHollowOpen";

   break;

  case 1:

   animation.type = @"pageCurl";

   break;

  case 2:

   animation.type = @"pageUnCurl";

   break;

  case 3:

   animation.type = @"suckEffect";

   break;

  default:

   break;

 }

 

 

 switch (direction) {    //方向

  case 0:

   animation.subtype = kCATransitionFromRight;

   break;

  case 1:

   animation.subtype = kCATransitionFromTop;

   break;

  case 2:

   animation.subtype = kCATransitionFromLeft;

   break;

  case 3:

   animation.subtype = kCATransitionFromBottom;

   break;

  default:

   break;

 }

 

 //执行动画

 UIView *bgView = [self.view viewWithTag:150];

 NSInteger front = [[bgView subviews] indexOfObject:[bgView viewWithTag:151]];

 NSInteger back = [[bgView subviews] indexOfObject:[bgView viewWithTag:152]];

 if (someThing) {

  [bgView exchangeSubviewAtIndex:front withSubviewAtIndex:back];  //图形变换

 }else {

  [bgView exchangeSubviewAtIndex:back withSubviewAtIndex:front];

 }

 

 [[bgView layer] addAnimation:animation forKey:@"animation"];     //bgView层执行动画

 //[[self.view layer] addAnimation:animation forKey:@"animation"];  //self.view层执行动画

 

}