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    =   @"<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     交叉淡化過渡(不支援過渡方向) 

push       新視圖把舊視圖推出去  

moveIn    新視圖移到舊視圖上面  

reveal    将舊視圖移開,顯示下面的新視圖  

cube      立方體翻滾效果  

oglFlip   上下左右翻轉效果  

suckEffect    收縮效果，如一塊布被抽走(不支援過渡方向)  

rippleEffect  滴水效果(不支援過渡方向)  

cameraIrisHollowOpen   相機鏡頭打開效果(不支援過渡方向)  

cameraIrisHollowClose  相機鏡頭關上效果(不支援過渡方向)