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

最新推荐文章于 2017-08-23 21:17:00 发布

转载最新推荐文章于 2017-08-23 21:17:00 发布 · 908 阅读

本文介绍如何在iOS应用中实现立方体效果的页面跳转动画。通过使用CATransition动画，详细展示了如何自定义动画类型、方向及时长，并提供完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于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: 不用自带的四种动画效果