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, // default
UIViewAnimationOptionTransitionFlipFromLeft    = 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

---

六、图示