圖片瀏覽（CATransition）轉場動畫

Main.storyboard

ViewController.m

//

//  ViewController.m

//  8A04.圖片瀏覽（轉場動畫）

//

//  Created by huan on 16/2/4.

//  Copyright © 2016年 huanxi. All rights reserved.

//

 

#import "ViewController.h"

#define AnimationDuration 2

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

-(IBAction)tapView:(UITapGestureRecognizer *)sender;

@property (nonatomic, strong) NSMutableArray *imgs;

@property (nonatomic, assign) NSInteger currentImgIndex;//當前的索引

@end

 

@implementation ViewController

 

-(NSMutableArray *)imgs{

    if (!_imgs) {

        _imgs = [NSMutableArray array];

        for (NSInteger i = 1; i < 10; i++) {

            NSString *imgName = [NSString stringWithFormat:@"%ld",i];

            [_imgs addObject:imgName];

        }

    }

    return _imgs;

}

 

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    NSLog(@"%@",self.imgs);

}

 

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 

-(IBAction)tapView:(UITapGestureRecognizer *)tap{

    //實現判斷圖片的左半邊仍是右半邊

    //獲取觸摸點

    CGPoint point = [tap locationInView:tap.view];

    NSLog(@"%@", NSStringFromCGPoint(point));

    

    if (point.x <= tap.view.bounds.size.width *0.5) {

        NSLog(@"上一張");

        [self previous];

    }else{

        NSLog(@"下一張");

        [self next];

    }

    

}

 

-(void)previous{

    //判斷當前圖片是否是第一張

    if (self.currentImgIndex == 0) {

        return;

    }

    

    //減索引 改圖片

    self.currentImgIndex --;

    self.imageView.image = [UIImage imageNamed:self.imgs[self.currentImgIndex]];

    //轉場動畫

    CATransition *animation = [CATransition animation];

    animation.type = @"push";

    //默認就是fromLeft

    animation.subtype = @"fromLeft";

    animation.duration = AnimationDuration;

    [self.imageView.layer addAnimation:animation forKey:nil];

}

 

/**

 * 提示：轉場動畫的類型（type）和子類型（subtype）能用字符串常量就用字符串常量

 */

 

 

/**

 *******************************************************

 type:動畫類型(好比：滴水效果，翻轉效果...)

 -------------------------------------------------------

 fade kCATransitionFade 交叉淡化過渡

 moveIn kCATransitionMoveIn 新視圖移到舊視圖上面

 push kCATransitionPush 新視圖把舊視圖推出去

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

 pageCurl               向上翻一頁

 pageUnCurl             向下翻一頁

 rippleEffect             滴水效果

 suckEffect 收縮效果，如一塊布被抽走

 cube                   立方體效果

 oglFlip              上下左右翻轉效果

 rotate     旋轉效果

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

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

 

 *******************************************************

 subtype: 動畫方向(好比說是從左邊進入，仍是從右邊進入...)

 ------------------------------------------------------

 kCATransitionFromRight;

 kCATransitionFromLeft;

 kCATransitionFromTop;

 kCATransitionFromBottom;

 

 當 type 爲@"rotate"(旋轉)的時候,它也有幾個對應的 subtype,分別爲:

 90cw 逆時針旋轉 90°

 90ccw 順時針旋轉 90°

 180cw 逆時針旋轉 180°

 180ccw  順時針旋轉 180°

 **/

-(void)next{

       //判斷當前圖片是否是最好一張

    if(self.currentImgIndex == self.imgs.count - 1){

        NSLog(@"已是最好一張");

        return;

    }

    

    //加索引 改圖片

    self.currentImgIndex ++;

    self.imageView.image = [UIImage imageNamed:self.imgs[self.currentImgIndex]];

    //設置圖片的時候，使用轉場動畫

    CATransition *animation = [CATransition animation];

    

    //設置轉場動畫的類型

//    `fade', `moveIn', `push' and `reveal'.

    //fade 漸變 moveIn 直接移動

    animation.type = @"rotate";

//    animation.type = kCATransitionPush;

    //設置轉場動畫的子類型

//    `fromLeft', `fromRight', `fromTop' and

//    * `fromBottom'  fromLeft 從左邊開始推

    animation.subtype = @"90cw";

    animation.duration = AnimationDuration;

    [self.imageView.layer addAnimation:animation forKey:nil];

}

 

@end