CATransition自定义转场动画

我们可以通过CATransiton来自定义一些漂亮的转场动画， 

CATransition继承自CAAnimation， 所以用法跟CAAnimation差不多

先直接上一个代码：

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UIButton    *btn;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //创建ImageView
    self.imageView       = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 100)];
    self.imageView.image = [UIImage imageNamed:@"1"];
    
    [self.view addSubview:self.imageView];
    
    //创建button
    self.btn       = [UIButton buttonWithType:UIButtonTypeSystem];
    self.btn.frame = CGRectMake(200, 400, 80, 40);
    
    [self.btn setTitle:@"变换" forState:UIControlStateNormal];
    [self.btn addTarget:self
                 action:@selector(changeImage)
       forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:self.btn];

}

- (void)changeImage {
    
    //创建专场动画
    CATransition *animation = [CATransition animation];
    animation.duration      = 1;
    animation.fillMode      = kCAFillModeForwards;
    animation.type          = @"oglFlip";
    animation.subtype       = kCATransitionFromTop;
    
    //把动画添加到layer
    [self.imageView.layer addAnimation:animation forKey:@"ropple"];
    self.imageView.image = [UIImage imageNamed:@"2"];
}

创建专场动画跟创建CAAnimation动画类似， 一样需要设置duration, fillmode

我们说下增加的两个属性

type， 表示转场动画的类型， iOS允许我们调用的有以下几种

@"cube" @"moveIn" @"reveal" @"fade"(default) @"pageCurl" @"pageUnCurl" @"suckEffect" @"rippleEffect" @"oglFlip"

 

subtype， 表示动画方向

/* Common transition subtypes. */

CA_EXTERN NSString * const kCATransitionFromRight
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromLeft
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromTop
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromBottom
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);