iOS 转场动画(CATransition)

1、前言

知道有这个动画很久了，但是一直没有使用过，这次项目中正好使用，所以这里整理一下，如果你想左右滑动切换不同界面，同时有不想使用ScrollView，又想有动画效果的话，那么CATransition 是个很好的选择

2、效果图

转场动画.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,     // 平面反转
    MCTransitonAnimTypeCameraIrisHollowOpen, //摄像机开
    MCTransitonAnimTypeCameraIrisHollowClose //摄像机关
 
};

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

/**
 动画的速度变化
 */
typedef NS_ENUM(NSUInteger, MCTransitonAnimTimingFunc) {
    MCTransitonAnimTimingFuncLinear,      //线性
    MCTransitonAnimTimingFuncEaseIn,      //慢入
    MCTransitonAnimTimingFuncEaseOut,     //慢出
    MCTransitonAnimTimingFuncEaseInEaseOut//慢入慢出
};

/**
 *  设置动画
 *  默认Fade，FromLeft，1s,Linear
 */
- (void)setTransitionAnimationWithType;
/**
 *  动画设置
 *
 *  @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)
/**
*  设置动画
*  默认MoveIn，FromLeft，1s,Linear
*/
- (void)setTransitionAnimationWithType{
   [self setTransitionAnimationWithType:MCTransitonAnimTypeMoveIn
                               duration:1.0f
                              direction:MCTransitonAnimDirectionFromLeft
                             timingFunc:MCTransitonAnimTimingFuncLinear];
}

/**
*  动画设置
*
*  @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:// 平面反转
           trans.type = @"oglFlip";
           break;
       case MCTransitonAnimTypeCameraIrisHollowOpen://摄像机开
           trans.type = @"cameraIrisHollowOpen";
           break;
       case MCTransitonAnimTypeCameraIrisHollowClose://摄像机关
           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中的分类导入项目，因为是UIView的分类，所以使用的时候如果是UIView类直接调用即可

// 例如 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地址