iOS 页面跳转动画CATransition详细分析

对于iOS动画的实现系统提供了很强大的方法，近日想实现一个类似三维动画立方体的的页面跳转效果，但一直搞不清楚layer的添加动画区别，最终找出想要的效果。下面给大家把代码贴上。

ViewController.m代码：

#import "ViewController.h"#import "NewViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    self.view.backgroundColor = [UIColor greenColor];        UIButton *nextPageButton = [UIButton buttonWithType:UIButtonTypeSystem];    nextPageButton.backgroundColor = [UIColor redColor];    nextPageButton.frame = CGRectMake(50, 50, 100, 50);    [nextPageButton addTarget:self action:@selector(nextPage:) forControlEvents:UIControlEventTouchUpInside];    [nextPageButton setTitle:@"下一页" forState:UIControlStateNormal];    [self.view addSubview:nextPageButton];}- (void)nextPage:(id)sender{    CATransition *animation=[CATransition animation];//创建CATransition    animation.duration=0.5;//持续时长0.3秒    animation.timingFunction=UIViewAnimationCurveEaseInOut;//计时函数，从头到尾的流畅度    animation.type=@"cube";//动画类型    animation.subtype=kCATransitionFromLeft;//子类型    //要令一个转场生效，组要将动画添加到将要变为动画视图所附着的图层。例如在两个视图控制器之间进行转场，那就将动画添加到窗口的图层中：    [[self.view.window layer]addAnimation:animation forKey:nil ];    NewViewController *top=[[NewViewController alloc]init];    [self presentViewController:top animated:NO completion:^{            }];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

NewViewController.m代码：

#import "NewViewController.h"@interface NewViewController ()@end@implementation NewViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view.    self.view.backgroundColor = [UIColor blueColor];        UIButton *nextPageButton = [UIButton buttonWithType:UIButtonTypeSystem];    nextPageButton.backgroundColor = [UIColor redColor];    nextPageButton.frame = CGRectMake(50, 50, 100, 50);    [nextPageButton addTarget:self action:@selector(lastPage:) forControlEvents:UIControlEventTouchUpInside];    [nextPageButton setTitle:@"上一页" forState:UIControlStateNormal];    [self.view addSubview:nextPageButton];}- (void)lastPage:(id)sender{    CATransition *animation=[CATransition animation];//创建CATransition    animation.duration=0.5;//持续时长0.3秒    animation.timingFunction=UIViewAnimationCurveEaseInOut;//计时函数，从头到尾的流畅度    animation.type=@"cube";//动画类型    animation.subtype=kCATransitionFromRight;//子类型    [[self.view.window layer]addAnimation:animation forKey:nil];    [self dismissViewControllerAnimated:NO completion:nil];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];        // Dispose of any resources that can be recreated.}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {    // Get the new view controller using [segue destinationViewController].    // Pass the selected object to the new view controller.}*/@end

         好的，三维立方体页面跳转效果就实现啦~

      视图切换，没有NavigationController的情况下，一般会使用presentViewController来切换视图并携带切换时的动画，

其中切换方法如下：当想调用自己设计的动画时，将该动画效果设为NO。

– presentViewController:animated:completion: 弹出，出现一个新视图 可以带动画效果，完成后可以做相应的执行函数经常为nil
– dismissViewControllerAnimated:completion:退出一个新视图 可以带动画效果，完成后可以做相应的执行函数经常为nil

presentModalViewController:animated:completion:使用系统自带四种动画

简单的实现方式：

[page2Controller setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];

[self presentModalViewController:myNextViewController animated:YES  completion:nil];

系统支持的四种动画：

typedef enum {

UIModalTransitionStyleCoverVertical=0, //默认方式，竖向上推

UIModalTransitionStyleFlipHorizontal, //水平反转

UIModalTransitionStyleCrossDissolve,//隐出隐现

UIModalTransitionStylePartialCurl,//部分翻页效果

} UIModalTransitionStyle;

presentModalViewController:animated:completion: 不用自带的四种动画效果    
 

常見的轉換類型（type）：

kCATransitionFade               //淡出

kCATransitionMoveIn          //覆盖原图

kCATransitionPush               //推出

kCATransitionReveal          //底部显出来

SubType:

kCATransitionFromRight

kCATransitionFromLeft    // 默认值  

kCATransitionFromTop

kCATransitionFromBottom

设置其他动画类型的方法(type):

pageCurl   向上翻一页

pageUnCurl 向下翻一页

rippleEffect 滴水效果

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

cube 立方体效果

oglFlip 上下翻转效果 

      部分内容参考该网址：http://blog.csdn.net/ityanping/article/details/39270609

• 上一篇iOS页面跳转及数据传递
• 下一篇NSPredicate

顶

0