iOS：核心動畫之轉場動畫CATransition

轉場動畫——CATransition

CATransition是CAAnimation的子類，用於作轉場動畫，可以爲層提供移出屏幕和移入屏幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點

UINavigationController就是經過CATransition實現了將控制器的視圖推入屏幕的動畫效果

動畫屬性:

–type：動畫過渡類型

–subtype：動畫過渡方向

–startProgress：動畫起點(在總體動畫的百分比)

–endProgress：動畫終點(在總體動畫的百分比)

 

過渡效果：

 

過渡方向：

CA_EXTERN NSString * const kCATransitionFromRight      //動畫從右往左

CA_EXTERN NSString * const kCATransitionFromLeft       //動畫從左往右

CA_EXTERN NSString * const kCATransitionFromTop       //動畫從下往上

CA_EXTERN NSString * const kCATransitionFromBottom  //動畫從上往下

 

具體實例以下：

實現功能：往工程中導入5張圖片素材,建立圖像視圖控件,而後經過向左或向右掃動手勢實現圖像視圖中圖片的輪換,即實現轉場動畫。

代碼以下：

//導入圖片素材

//聲明屬性

#import "ViewController.h"

@interface ViewController ()
@property (strong,nonatomic)UIImageView *imageView;//圖像視圖
@property (assign,nonatomic)NSInteger index;       //當前圖片的索引
@end

//初始化,建立圖像視圖控件並設置圖片,同時建立掃動手勢,添加掃動事件

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //設置當前圖片爲第一張
    self.index = 1;
    
    //初始化圖像視圖
    self.imageView = [[UIImageView alloc]initWithFrame:self.view.frame];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"s%ld.jpg",self.index]]];
    
    
    //容許圖像視圖進行用戶交互
    self.imageView.userInteractionEnabled = YES;
    [self.view addSubview:self.imageView];
    
    
    
    //建立掃動手勢
    UISwipeGestureRecognizer *leftswipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
    //設置掃動方向爲向左掃
    leftswipe.direction = UISwipeGestureRecognizerDirectionLeft;
    //添加掃動手勢
    [self.imageView addGestureRecognizer:leftswipe];
    
    //建立掃動手勢
    UISwipeGestureRecognizer *rightswipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
    //設置掃動方向爲向右掃
    rightswipe.direction = UISwipeGestureRecognizerDirectionRight;
    //添加掃動手勢
    [self.imageView addGestureRecognizer:rightswipe];
}

//處理掃動手勢事件,進行轉場動畫的建立並執行動畫

#pragma mark -掃動手勢
-(void)swipe:(UISwipeGestureRecognizer *)sender
{
    //根據手勢的方向改變圖片的索引,一共5張圖片
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft)//向左掃
    {
        if (self.index >1 )
        {
            self.index--;
        }
        else
        {
            self.index = 5;
        }
    }
    else //向右掃
    {
        if (self.index <5)
        {
            self.index++;
        }
        else
        {
            self.index = 1;
        }
    }
    
    //添加轉場動畫
    CATransition *transition = [[CATransition alloc]init];
    //過渡類型類立方體翻轉效果
    transition.type = @"cube";
    //過渡方向爲從下往上翻轉
    transition.subtype = kCATransitionFromBottom;
    //動畫持續時間
    transition.duration = 1.0f;
    //添加轉場動畫
    [self.imageView.layer addAnimation:transition forKey:@"transition"];

    //設置每一次轉場動畫後的圖像視圖的圖片
    [self.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"s%ld.jpg",self.index]]];
}

 

演示結果以下：

開始時：                                                     左掃或者右掃時：動畫立體式的從上往下翻轉