iOS学习笔记-078.核心动画04——CATransition（转场动画)

核心动画04——CATransition（转场动画)

一、简介

CATransition是CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

动画属性:

type：动画过渡类型subtype：动画过渡方向startProgress：动画起点(在整体动画的百分比)endProgress：动画终点(在整体动画的百分比)

---

二、转场动画过渡效果

类型字符串 效果说明 关键字 方向 fade 交叉淡化过渡 YES push 新视图把旧视图推出去 YES moveIn 新视图移到旧视图上面 YES reveal 将旧视图移开,显示下面的新视图 YES cube 立方体翻滚效果 oglFlip 上下左右翻转效果 suckEffect 收缩效果，如一块布被抽走 NO rippleEffect 水滴效果 NO pageCurl 向上翻页效果 pageUnCurl 向下翻页效果 cameraIrisHollowOpen 相机镜头打开效果 NO cameraIrisHollowClose 相机镜头关闭效果 NO

---

三、转场基本代码

static int _i = 0;//转场动画-(void)transAnim:(NSString*)type{    //转场代码与转场动画必须得在同一个方法当中.    //转场代码    _i = _i%3 + 1;    self.imageV.image = [UIImage imageNamed:( [NSString stringWithFormat:@"%d",_i] )];    //转场动画    CATransition *anim = [CATransition animation];    //设置转场动画类型    anim.type = type;    //起始位置    anim.startProgress = 0.2;    anim.endProgress = 0.9;    [self.imageV.layer addAnimation:anim forKey:nil];}

---

四、使用UIView动画函数实现转场动画——单视图

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

参数说明：

duration：动画的持续时间view：需要进行转场动画的视图options：转场动画的类型animations：将改变视图属性的代码放在这个block中completion：动画结束后，会自动调用这个block

options：转场动画的类型

UIViewAnimationOptionTransitionNone            = 0 << 20, // defaultUIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,UIViewAnimationOptionTransitionCurlUp          = 3 << 20,UIViewAnimationOptionTransitionCurlDown        = 4 << 20,UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,

代码示例

//使用UIView动画函数实现转场动画- (IBAction)viewTranstion:(id)sender {    [UIView transitionWithView:self.imageV duration:0.3 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{        //转场代码        _i = _i%3 + 1;        self.imageV.image = [UIImage imageNamed:( [NSString stringWithFormat:@"%d",_i] )];    } completion:^(BOOL finished) {    }];}

---

五、代码

////  ViewController.m//  03_UIView72_转场动画////  Created by 杞文明 on 17/6/15.//  Copyright © 2017年 杞文明. All rights reserved.//#import "ViewController.h"@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *imageV;@property (weak, nonatomic) IBOutlet UIView *conV;@property (weak, nonatomic) NSArray<NSString *> *typeArr;@property (weak, nonatomic) UIButton *lastBtn;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initArr];    [self createButtons];}//初始化动画的type-(void)initArr{    _typeArr = [NSArray arrayWithObjects:@"fade",@"push",@"moveIn",@"reveal",@"cube",@"fade",@"oglFlip",@"suckEffect",@"rippleEffect",@"pageCurl",@"pageUnCurl",@"cameraIrisHollowOpen",@"cameraIrisHollowClose", nil];}//创建按钮-(void)createButtons{    //控件之间的空格    int MARGIN_WIDTH = 10;    int col = 3;    int width = (_conV.bounds.size.width-MARGIN_WIDTH*(col+1)) / col;    int height = 40;    int j = 0;    for (int i=0; i<_typeArr.count; i++) {        j = i/col;        NSInteger startX = MARGIN_WIDTH + (MARGIN_WIDTH+width)*(i%col);        NSInteger startY = MARGIN_WIDTH + (MARGIN_WIDTH+height)*j;        UIButton * button = [[UIButton alloc]initWithFrame:CGRectMake(startX, startY, width, height)];        //设置对应的值        NSString * title = [NSString stringWithFormat:@"%@",_typeArr[i]];        //给控件设置值和一些属性]        button.backgroundColor = [UIColor grayColor];        //文字        [button setTitle:title forState:UIControlStateNormal];        //字体颜色        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];        [button setTitleColor:[UIColor greenColor] forState:UIControlStateSelected];        //给控件点击事件添加代理        [button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];        //.把控件添加到myView中        [_conV addSubview:button];    }}/**控件的点击事件*/-(void)clickButton:(UIButton*)button{    [self transAnim:button.titleLabel.text];    //选中设置    if(_lastBtn!=nil)        [_lastBtn setSelected:NO];    [button setSelected:YES];    _lastBtn = button;}//使用UIView动画函数实现转场动画- (IBAction)viewTranstion:(id)sender {    [UIView transitionWithView:self.imageV duration:0.3 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{        //转场代码        _i = _i%3 + 1;        self.imageV.image = [UIImage imageNamed:( [NSString stringWithFormat:@"%d",_i] )];    } completion:^(BOOL finished) {    }];}static int _i = 1;//转场动画-(void)transAnim:(NSString*)type{    //转场代码与转场动画必须得在同一个方法当中.    //转场代码    _i = _i%3 + 1;    self.imageV.image = [UIImage imageNamed:( [NSString stringWithFormat:@"%d",_i] )];    //转场动画    CATransition *anim = [CATransition animation];    //设置转场动画类型    anim.type = type;    //方向    //anim.subtype = kCATransitionFromTop;    //起始位置    anim.startProgress = 0.2;    anim.endProgress = 0.9;    [self.imageV.layer addAnimation:anim forKey:nil];}@end

---

六、图示