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