CATransition-转场动画


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    =   @"reveal";
    
    //判断轻扫手势方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
          transition.subtype    =   kCATransitionFromRight;
        
    }else if (sender.direction == UISwipeGestureRecognizerDirectionRight){
          transition.subtype    =   kCATransitionFromLeft;
    }
    
    //给图层添加转场动画
    [_imageV.layer addAnimation:transition forKey:nil];
    
}



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

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


push       新视图把旧视图推出去  


moveIn    新视图移到旧视图上面  



reveal    将旧视图移开,显示下面的新视图  



cube      立方体翻滚效果  



oglFlip   上下左右翻转效果  



suckEffect    收缩效果,如一块布被抽走(不支持过渡方向)  



rippleEffect  滴水效果(不支持过渡方向)  



cameraIrisHollowOpen   相机镜头打开效果(不支持过渡方向)  

CATransition-转场动画_第1张图片

cameraIrisHollowClose  相机镜头关上效果(不支持过渡方向)

CATransition-转场动画_第2张图片





你可能感兴趣的:(UI,CATransition,转场动画,gif)