免费开源的iOS开发学习平台

核心动画CoreAnimation:8-CATransition转场动画

CATransition转场动画可以定义图层的显示内容在切换的时候的动画效果,例如,在导航控制器使用过程中,子控制器的显示与退出效果就是通过CATransition转场动画实现的。另外,在苹果KeyNote中,当我们切换幻灯片时,也会体现切换的效果。

CATransition类的常用属性

通过设置CATransition类中的属性,我们可以定制转场动画的效果,常用的属性主要包括:

  • type:动画的类型。常用的有4种:fade(渐变)、moveIn(移入)、push(推入)、reveal(移出),默认为fade(渐变)
@property(copy) NSString *type;
  • subType:动画的子类型,可以指定动画播放时开始的方位或方向,有4中方式:fromLeft(从左开始)、fromRight(从右开始)、fromTop(从上开始) 、fromBottom(从下开始)
@property(nullable, copy) NSString *subtype;
  • 转场动画启动时以及结束时的进度百分比,取值为0~1,通过设置这两个属性,我们可以实现动画从中间某个状态开始播放,或者在中间某个状态提前结束。
@property float startProgress;
@property float endProgress;

示例代码

在下方的示例代码中,我们实现了当点击屏幕时,切换一个UIImageView控件显示图像的动画过程。

  • 在控制器类中添加一个UIImageView类的属性
@interface ViewController ()
@property (nonatomic ,strong) UIImageView *transitionView;
@end
  • 通过懒加载的方式,设置transitionView的属性
-(UIImageView *)transitionView{
    if (_transitionView == nil) {
        _transitionView = [[UIImageView alloc] initWithFrame:CGRectMake(140, 100, 100, 100)];
        _transitionView.image = [UIImage imageNamed:@"99ios"];
    }
    return _transitionView;
}
  • 添加transitionView到控制器视图的view上
- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.transitionView];
}
  • 当点击屏幕时,transitionView显示的图片会发生变化,但变化的过程会展示一段动画。
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //切换图片显示
    self.transitionView.image = [UIImage imageNamed:@"football"];
    //创建一个CATransition动画对象
    CATransition *animation = [CATransition animation];
    animation.type = @"fade";
    animation.duration = 2.0;
    //添加CATransition对象到transitionView的layer上
    [self.transitionView.layer addAnimation:animation forKey:nil];
}

下面展示了切换前、切换过程中以及切换后的屏幕显示情况。

示例代码

https://github.com/99ios/14.4.8