CATransition-转场动画

最新推荐文章于 2022-08-23 15:06:18 发布

explore_zhang

最新推荐文章于 2022-08-23 15:06:18 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

分类专栏： UI 文章标签： CATransition 转场动画 gif

本文链接：https://blog.youkuaiyun.com/explore_zhang/article/details/50533383

UI 专栏收录该内容

28 篇文章

订阅专栏

本文深入探讨了CATransition在iOS应用中实现动画过渡的原理和应用，包括其属性解析、过渡效果及方向，以及一个实际的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CATransition-转场动画

概念
它是 CAAnimation 的子类，用于做转场动画，能够为层 (CALayer) 提供移出屏幕和移入屏幕的动画效果。
实际上 UINavigationController 就是通过 CATransition 实现了将控制器的视图推入屏幕的动画效果。

属性解析:

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

过渡效果:

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

过渡方向

kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromBottom
kCATransitionFromTop

CATransition的使用Demo

    //图片视图控件
    IBOutlet    UIImageView     *_imageV;
    //全局计数器
                int             _integer;

- (IBAction)swip:(UISwipeGestureRecognizer *)sender {
    
    //浏览图片的计数器
    _integer++;
    
    //如果计数等于图片个数，置为0
    if (_integer == imageCount) {
        _integer = 0;
    }

             UIImage *imageN    =   [UIImage imageNamed:[NSString stringWithFormat:@"%02d",_integer + 1]];
               _imageV.image    =   imageN;
    
    //创建转场动画对象
    CATransition *transition    =   [CATransition animation];
             transition.type    =   @"<span style="font-family: Menlo; font-size: 11px;">reveal</span><span style="font-family: Arial, Helvetica, sans-serif;">";</span>
    
    //判断轻扫手势方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
          transition.subtype    =   kCATransitionFromRight;
        
    }else if (sender.direction == UISwipeGestureRecognizerDirectionRight){
          transition.subtype    =   kCATransitionFromLeft;
    }
    
    //给图层添加转场动画
    [_imageV.layer addAnimation:transition forKey:nil];
    
}

转场动画 type 的详细 gif 展示：

fade 交叉淡化过渡(不支持过渡方向)