iOS开发之转场动画

CATransition是CAAnimationd的子类。

CATransition的type属性是转场动画类型:

以下是四种合法的基本效果:

kCATransitionPush 推入效果
kCATransitionMoveIn 移入效果
kCATransitionReveal 截开效果
kCATransitionFade 渐入渐出效果

默认值是fade

以下两部分是私有API:
1. 可以安全使用的API效果:

cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开

2. 以下API效果请慎用

spewEffect 新版面在屏幕下方中间位置被释放出来覆盖旧版面.
genieEffect 旧版面在屏幕左下方或右下方被吸走, 显示出下面的新版面
unGenieEffect 新版面在屏幕左下方或右下方被释放出来覆盖旧版面.
twist 版面以水平方向像龙卷风式转出来.
tubey 版面垂直附有弹性的转出来.
swirl 旧版面360度旋转并淡出, 显示出新版面.
charminUltra 旧版面淡出并显示新版面.
zoomyIn 新版面由小放大走到前面, 旧版面放大由前面消失.
zoomyOut 新版面屏幕外面缩放出现, 旧版面缩小消失.
oglApplicationSuspend 像按”home” 按钮的效果.

subtype属性对应动画的运动方向,合法的有四种,即fromLeft, fromRight, fromTopfromBottom.**

示例1:

首先用可视化创建一个UIView和一个按钮。

iOS开发之转场动画_第1张图片
创建一个UIView和一个按钮

关联成属性:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *testView;
@end

按钮点击事件如下:

- (IBAction)testAction:(UIButton *)sender {
    //创建layer过渡动画
    CATransition *transition = [CATransition animation];
    //设置持续时间
    transition.duration = 2;
    //设置过度方向
    transition.subtype = kCATransitionMoveIn;
    //设置过渡效果
    transition.type = @"pageUnCurl";
    //在图层上添加动画。注:layer上每一个key只对应一个动画。key也可以设为nil。
    [_testView.layer addAnimation:transition forKey:@"test"];
}

点击按钮后开始动画:

iOS开发之转场动画_第2张图片
iOS开发之转场动画_第3张图片
示例1

示例2:

再来看一种跳转页面的动画效果。
首先给视图控制器添加导航控制器,添加一个UIBarButtonItem或者在视图上添加普通UIButton(不赘述)。

iOS开发之转场动画_第4张图片
添加导航控制器和UIBarButtonItem

新建一个视图控制器类SecondViewController,设背景颜色。

self.view.backgroundColor = [UIColor cyanColor];

添加点击事件如下:

- (IBAction)toNextVC:(id)sender {
    CATransition *transition = [CATransition animation];
    transition.duration = 2;
    transition.type = @"rippleEffect"; //此为波纹效果,其他效果请自行尝试
    //把动画添加到导航控制器的视图的图层上
    [self.navigationController.view.layer addAnimation:transition forKey:nil];
    //初始化要跳转到的视图控制器
    SecondViewController *secondVC = [[SecondViewController alloc]init];
    //跳转
    [self.navigationController showViewController:secondVC sender:nil];
}

效果如图:

iOS开发之转场动画_第5张图片
iOS开发之转场动画_第6张图片
iOS开发之转场动画_第7张图片
示例2效果

你可能感兴趣的:(iOS开发之转场动画)