1、前言

知道有這個動畫很久了，但是一直沒有使用過，這次項目中正好使用，所以這里整理一下，如果你想左右滑動切換不同界面，同時有不想使用ScrollView，又想有動畫效果的話，那么CATransition 是個很好的選擇

2、效果圖

轉(zhuǎn)場動畫.gif

3、代碼

其實代碼很簡單，這里我對我說收集到的效果做了一個整理，寫了一個分類

//.h
#import <UIKit/UIKit.h>

@interface UIView (MCTransition)
/**
 動畫效果
 */
typedef NS_ENUM(NSUInteger, MCTransitonAnimType) {
    MCTransitonAnimTypeFade = 0,    //漸變，效果不明顯
    MCTransitonAnimTypeMoveIn,      //新的移入
    MCTransitonAnimTypeReveal,      //舊的移出
    MCTransitonAnimTypePush,         //推入,新的推入舊的推出
    MCTransitonAnimTypePageCurl,    // 向上翻一頁
    MCTransitonAnimTypePageUnCurl,  // 向下翻一頁
    MCTransitonAnimTypeRippleEffect,// 波紋
    MCTransitonAnimTypeSuckEffect,  // 像一塊布被抽走
    MCTransitonAnimTypeCube,        // 立方體
    MCTransitonAnimTypeOglFlip,     // 平面反轉(zhuǎn)
    MCTransitonAnimTypeCameraIrisHollowOpen, //攝像機開
    MCTransitonAnimTypeCameraIrisHollowClose //攝像機關(guān)
 
};

/**
 動畫方向
 */
typedef NS_ENUM(NSUInteger, MCTransitonAnimDirection) {
    MCTransitonAnimDirectionFromLeft,
    MCTransitonAnimDirectionFromRight,
    MCTransitonAnimDirectionFromTop,
    MCTransitonAnimDirectionFromBottom
};

/**
 動畫的速度變化
 */
typedef NS_ENUM(NSUInteger, MCTransitonAnimTimingFunc) {
    MCTransitonAnimTimingFuncLinear,      //線性
    MCTransitonAnimTimingFuncEaseIn,      //慢入
    MCTransitonAnimTimingFuncEaseOut,     //慢出
    MCTransitonAnimTimingFuncEaseInEaseOut//慢入慢出
};

/**
 *  設(shè)置動畫
 *  默認Fade，F(xiàn)romLeft，1s,Linear
 */
- (void)setTransitionAnimationWithType;
/**
 *  動畫設(shè)置
 *
 *  @param animType     動畫種類
 *  @param duration     時間
 *  @param subtype      方向
 *  @param timingFunc   速度變化
 */
- (void)setTransitionAnimationWithType:(MCTransitonAnimType)animType
                              duration:(float)duration
                             direction:(MCTransitonAnimDirection)subtype
                            timingFunc:(MCTransitonAnimTimingFunc)timingFunc;
@end

//.m
#import "UIView+MCTransition.h"

@implementation UIView (MCTransition)
/**
*  設(shè)置動畫
*  默認MoveIn，F(xiàn)romLeft，1s,Linear
*/
- (void)setTransitionAnimationWithType{
   [self setTransitionAnimationWithType:MCTransitonAnimTypeMoveIn
                               duration:1.0f
                              direction:MCTransitonAnimDirectionFromLeft
                             timingFunc:MCTransitonAnimTimingFuncLinear];
}

/**
*  動畫設(shè)置
*
*  @param animType     動畫種類
*  @param duration     時間
*  @param subtype      方向
*  @param timingFunc   速度變化
*/
- (void)setTransitionAnimationWithType:(MCTransitonAnimType)animType
                             duration:(float)duration
                            direction:(MCTransitonAnimDirection)subtype
                           timingFunc:(MCTransitonAnimTimingFunc)timingFunc
{
   CATransition *trans = [CATransition animation];
   trans.duration = duration;
   // 動畫種類
   switch (animType) {
       case MCTransitonAnimTypeFade://漸變，效果不明顯
           trans.type = kCATransitionFade;
           break;
       case MCTransitonAnimTypeMoveIn://新的移入
           trans.type = kCATransitionMoveIn;
           break;
       case MCTransitonAnimTypeReveal://舊的移出
           trans.type = kCATransitionReveal;
           break;
       case MCTransitonAnimTypePush://推入,新的推入舊的推出
           trans.type = kCATransitionPush;
           break;
       case MCTransitonAnimTypePageCurl:// 向上翻一頁
           trans.type = @"pageCurl";
           break;
       case MCTransitonAnimTypePageUnCurl:// 向下翻一頁
           trans.type = @"pageUnCurl";
           break;
       case MCTransitonAnimTypeRippleEffect:// 波紋
           trans.type = @"rippleEffect";
           break;
       case MCTransitonAnimTypeSuckEffect:// 像一塊布被抽走
           trans.type = @"suckEffect";
           break;
       case MCTransitonAnimTypeCube:// 立方體
           trans.type = @"cube";
           break;
       case MCTransitonAnimTypeOglFlip:// 平面反轉(zhuǎn)
           trans.type = @"oglFlip";
           break;
       case MCTransitonAnimTypeCameraIrisHollowOpen://攝像機開
           trans.type = @"cameraIrisHollowOpen";
           break;
       case MCTransitonAnimTypeCameraIrisHollowClose://攝像機關(guān)
           trans.type = @"cameraIrisHollowClose";
           break;
       default:
           break;
   }
   // 動畫的速度變化
   switch (timingFunc) {
       case MCTransitonAnimTimingFuncLinear:
           trans.timingFunction =  [CAMediaTimingFunction functionWithName:@"linear"];
           break;
       case MCTransitonAnimTimingFuncEaseIn:
           trans.timingFunction =  [CAMediaTimingFunction functionWithName:@"easeIn"];
           break;
       case MCTransitonAnimTimingFuncEaseOut:
           trans.timingFunction =  [CAMediaTimingFunction functionWithName:@"easeOut"];
           break;
       case MCTransitonAnimTimingFuncEaseInEaseOut:
           trans.timingFunction =  [CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
           break;
       default:
           break;
   }
   switch (subtype) {
       case MCTransitonAnimDirectionFromLeft:
           trans.subtype = kCATransitionFromLeft;
           break;
       case MCTransitonAnimDirectionFromRight:
           trans.subtype = kCATransitionFromRight;
           break;
       case MCTransitonAnimDirectionFromTop:
           trans.subtype = kCATransitionFromTop;
           break;
       case MCTransitonAnimDirectionFromBottom:
           trans.subtype = kCATransitionFromBottom;
           break;
       default:
           break;
   }
   [self.layer addAnimation:trans forKey:nil];
}

4、使用

將Demo中的分類導(dǎo)入項目，因為是UIView的分類，所以使用的時候如果是UIView類直接調(diào)用即可

// 例如 demo中
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    self.imageView.image = [UIImage imageNamed:self.imageArray[indexPath.row%self.imageArray.count]];
    [self.imageView setTransitionAnimationWithType:indexPath.row
                                          duration:1
                                         direction:MCTransitonAnimDirectionFromLeft
                                        timingFunc:MCTransitonAnimTimingFuncEaseIn];
}

最后附上Demo地址