CATransition自定义转场动画

时间:2023-03-09 02:57:55
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(, , , )];
self.imageView.image = [UIImage imageNamed:@""]; [self.view addSubview:self.imageView]; //创建button
self.btn = [UIButton buttonWithType:UIButtonTypeSystem];
self.btn.frame = CGRectMake(, , , ); [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 = ;
animation.fillMode = kCAFillModeForwards;
animation.type = @"oglFlip";
animation.subtype = kCATransitionFromTop; //把动画添加到layer
[self.imageView.layer addAnimation:animation forKey:@"ropple"];
self.imageView.image = [UIImage imageNamed:@""];
}

创建专场动画跟创建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);