1、前言
知道有这个动画很久了,但是一直没有使用过,这次项目中正好使用,所以这里整理一下,如果你想左右滑动切换不同界面,同时有不想使用ScrollView,又想有动画效果的话,那么CATransition 是个很好的选择
2、效果图
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地址