https://www.jianshu.com/p/39c051cfe7ddios
CATransition
CATransition 是CAAnimation的子类（以下图所示），用于控制器和控制器之间的转场动画。可以来自定义系统的push和present。实现页面间的动画效果。git
转场动画就是从一个场景以动画的形式过渡到另外一个场景。转场动画的使用通常分为如下几个步骤：
- 建立转场动画
- 设置转场类型、子类型（可选）及其余属性画
- 设置转场后的新视图并添加动画到图层
ios的画面切换的动画效果的API主要经过调用系统已定义的动画效果实现，这些效果已基本囊括开发的需求，若是须要更加复杂的效果，能够考虑CATransition来实现。github
如下是基本的四种效果安全
kCATransitionPush 推入效果
kCATransitionMoveIn 移入效果
kCATransitionReveal 截开效果
kCATransitionFade 渐入渐出效果框架
如下API效果能够安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开布局
如下API效果请慎用动画
spewEffect 新版面在屏幕下方中间位置被释放出来覆盖旧版面.
genieEffect 旧版面在屏幕左下方或右下方被吸走, 显示出下面的新版面
unGenieEffect 新版面在屏幕左下方或右下方被释放出来覆盖旧版面.
twist 版面以水平方向像龙卷风式转出来.
tubey 版面垂直附有弹性的转出来.
swirl 旧版面360度旋转并淡出, 显示出新版面.
charminUltra 旧版面淡出并显示新版面.
zoomyIn 新版面由小放大走到前面, 旧版面放大由前面消失.
zoomyOut 新版面屏幕外面缩放出现, 旧版面缩小消失.
oglApplicationSuspend 像按”home” 按钮的效果.url
// 使用场景 1spa
1.初始化代理
CATransition *transition = [CATransition animation];
2.设置动画时长,设置代理人
transition.duration = 1.0f;
transition.delegate = self;
3.设置切换速度效果
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
枚举值:
kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefault
4.动画切换风格
transition.type = kCATransitionFade;
枚举值:
kCATransitionFade = 1, // 淡入淡出
kCATransitionPush, // 推动效果
kCATransitionReveal, // 揭开效果
kCATransitionMoveIn, // 慢慢进入并覆盖效果
5.动画切换方向
transition.subtype = kCATransitionFromTop;//顶部
枚举值:
kCATransitionFromRight//右侧
kCATransitionFromLeft//左侧
kCATransitionFromTop//顶部
kCATransitionFromBottom//底部
6.进行跳转
[self.navigationController.view.layer addAnimation:transition forKey:nil];
[self.navigationController pushViewController:"你要跳转的页面" animated:NO];
跳转动画必定设置为NO,否则会两个效果叠加
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview
下面经过自定义push 和 present 两个demo来分析下转场动画的实现原理：
自定义 Push
首先要完场自定义Push 咱们须要建立一个转场动画对象，继承于NSObject （导入<UIKit/UIKit.h>框架）并遵照UIViewControllerAnimatedTransitioning协议， 这里叫作MagicMoveTransition。
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface MagicMoveTransition : NSObject<UIViewControllerAnimatedTransitioning>
@end
咱们须要实现UIViewControllerAnimatedTransitioning协议里面的代理方法来实现转场动画效果。
该方法返回动画执行时间
、、、、、
该方法用来实现两个VC间的动画布局
、、、、、
transitionContext 该参数 可让咱们去访问一些实现对象所必须的对象
扩展 UIViewControllerContextTransitioning
1. - （UIView *）containerView;
// 转场动画的容器 -> 添加两个控制器 视图内容 （注意添加的先后顺序）
2. - (UIViewController *)viewControllerForKey:(NSString *)key;
// 经过该方法， Key值 拿到过渡的两个VC
3. - (CGRect)initialFrameForViewController:(UIViewController *)vc;
- (CGRect)finalFrameForViewController:(UIViewController *)vc;
// 经过这个方法 可以得到先后两个 ViewController 的frame，用来布局视图对象空间位置
如今咱们能够经过 transitionContext开始作转场动画
// 起始VC
ViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
// 目的VC
DeatailViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 转场视图容器
UIView *containerView = [transitionContext containerView];
而后咱们须要获取CollectionViewCell 上面的视图ImageView 进行作动画
扩展 iOS , UIView 中坐标的转换
- (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view;
// 将像素Point 由Point所在控制器转换到目标控制器视图View中， 返回在目标视图中的像素值。
- (CGPoint)convertPoint:(CGPoint)point fromView:(UIView *)view;
// 由上面一条相反，获取目标View的像素Point返回到当前控制器View中
- (CGRect)convertRect:(CGRect)rect toView:(UIView *)view;
// 将坐标frame的rect值，由当前所在的目标视图View中， 返回在当前视图中的rect
- (CGRect)convertRect:(CGRect)rect fromView:(UIView *)view;
// 将坐标frame的rect值，由当前所在的目标视图View中， 返回在当前视图中的rect
咱们在这里经过获取咱们点击的Cell，获取上面的ImageView
- (nullable NSArray<NSIndexPath *> *)indexPathsForSelectedItems; // returns nil or an array of selected index paths
- (nullable UICollectionViewCell *)cellForItemAtIndexPath:(NSIndexPath *)indexPath;
具体代码以下
NSIndexPath *indexPath = [[fromVC.collectionView indexPathsForSelectedItems] firstObject];
fromVC.indexPath = indexPath; // 记录indexPath 返回时使用
CustomCollectionViewCell *cell = (CustomCollectionViewCell *)[fromVC.collectionView cellForItemAtIndexPath:indexPath];
// 对Cell上面的图片 作截图 来实现过渡动画视图
UIView *screenShot = [cell.pic snapshotViewAfterScreenUpdates:NO];
screenShot.backgroundColor = [UIColor clearColor];
screenShot.frame = fromVC.finiRect = [containerView convertRect:cell.pic.frame fromView:cell.pic.superview];
// fromVC.finiRect 返回时获取cell上的坐标
cell.pic.hidden = YES;
// 在进入下一个界面时，隐藏当前Cell上面的imageView
而后咱们 来 设置第二个控制器的位置和透明度
toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
toVC.view.alpha = 0.5;
toVC.secondPic.hidden = YES;
// 把动画先后的两个ViewController加到容器控制器中
[containerView addSubview:toVC.view];
[containerView addSubview:screenShot];
// 注意添加顺序
如今开始作动画，能够根据你的项目需求来获取，控制器内的控件，来完成彼此间的动画交互。
这里 :[self transitionDuration:transitionContext]会返回转场动画所进行时间。
执行该语句来告诉系统转场动画结束， 这里使用!transitionContext.transitionWasCancelled，是为了后面作手势交互，避免手势取消时，形成卡顿现象。
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
// 调用自动布局
[containerView layoutIfNeeded];
fromVC.view.alpha = 1.0;
// 布局坐标
// 获取到下一个VC中的secondPic.frame,使Cell上面的截图，移动到第二VC视图中， 动画结束后， 移除该截图。视觉上会产生一种过渡效果。
screenShot.frame = [containerView convertRect:toVC.secondPic.frame toView:toVC.secondPic.superview];
} completion:^(BOOL finished) {
toVC.secondPic.hidden = NO;
cell.pic.hidden = NO;
// 动画截图移除View
[screenShot removeFromSuperview];
toVC.view.alpha = 1;
// 动画结束
// 必定不要忘记告诉系统动画结束
// 执行
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
如今咱们就能够来实现来使用自定义的转场动画对象
这里的转场动画属于自定义push， 由导航栏来控制，属于导航控制器来负责转场。咱们让当前控制器来做为 UINavigationControllerDelegate代理对象， 并实现协议方法。
在视图已经出现的时候来指定代理对象为自身
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
self.navigationController.delegate = self;
}
#pragma mark - 返回咱们写好的转场对象
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC
{
if ([toVC isKindOfClass:[DeatailViewController class]]) {
MagicMoveTransition *transition = [[MagicMoveTransition alloc] init];
return transition;
}
return nil;
}
到这里咱们push转场动画就已经实现了， pop回来的动画咱们能够类比push来实现。
#import "MagicMoveBackTransition.h"
#import "ViewController.h"
#import "DeatailViewController.h"
#import "CustomCollectionViewCell.h"
@implementation MagicMoveBackTransition
#pragma mark - 返回动画时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
return 0.6f;
}
#pragma mark - 两个VC过渡动画
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
// 目的VC
ViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 起始VC
DeatailViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
// 转场视图容器
UIView *containerView = [transitionContext containerView];
UIView *screenShot = [fromVC.secondPic snapshotViewAfterScreenUpdates:NO];
screenShot.backgroundColor = [UIColor clearColor];
screenShot.frame = [containerView convertRect:fromVC.secondPic.frame fromView:fromVC.secondPic.superview];
fromVC.secondPic.hidden = YES;
// 初始化第二个Vc
toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
CustomCollectionViewCell *cell = (CustomCollectionViewCell *)[toVC.collectionView cellForItemAtIndexPath:toVC.indexPath];
cell.pic.hidden = YES;
[containerView insertSubview:toVC.view belowSubview:fromVC.view];
[containerView addSubview:screenShot];
// 发生动画
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
fromVC.view.alpha = 0;
screenShot.frame = toVC.finiRect;
} completion:^(BOOL finished) {
[screenShot removeFromSuperview];
fromVC.secondPic.hidden = NO;
cell.pic.hidden = NO;
fromVC.view.alpha = 1;
// 结束
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
}
@end
另外咱们能够经过添加手势,来能实现系统手势驱动;UIPercentDrivenInteractiveTransition 可以帮助咱们完成视图切换的过分动画
在 DeatailViewController pop回来时添加屏幕边缘手势
// 添加屏幕边缘手势
UIScreenEdgePanGestureRecognizer *edgePagGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgeAction:)];
edgePagGesture.edges = UIRectEdgeLeft; // 设置什么便捷滑入
[self.view addGestureRecognizer:edgePagGesture];
// 实现手势方法
iOS7 新加入一个类对象 UIPercentDrivenInteractiveTransition ;这个对象会根据咱们的手势，来决定咱们界面跳转的自定义过渡效果，咱们在手势action方法中，对手势驱动状态进行判断，来决定是否过渡动画。
- (void)edgeAction:(UIScreenEdgePanGestureRecognizer *)sender
{
// 计算手指滑动的距离
// 计算手势驱动占屏幕的百分比
CGFloat distance = [sender translationInView:sender.view].x / self.view.bounds.size.width;
distance = MIN(1.0, MAX(0.0, distance));
// 限制百分比 0 - 1 之间
if (sender.state == UIGestureRecognizerStateBegan) {
self.percentDrivenTransition = [[UIPercentDrivenInteractiveTransition alloc] init];
[self.navigationController popViewControllerAnimated:YES];
}
else if (sender.state == UIGestureRecognizerStateChanged)
{
// 手势在慢慢划入 // 把手势的进度告诉 UIPercentDrivenInteractiveTransition
[self.percentDrivenTransition updateInteractiveTransition:distance];
}
else if (sender.state == UIGestureRecognizerStateEnded || sender.state == UIGestureRecognizerStateCancelled)
{
// 判断当手势到达必定范围内
if (distance > 0.5) {
[self.percentDrivenTransition finishInteractiveTransition];
}
else
{
[self.percentDrivenTransition cancelInteractiveTransition];
}
self.percentDrivenTransition = nil;
}
}
// 执行手势驱动代理方法
- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController
{
if ([animationController isKindOfClass:[MagicMoveBackTransition class]]) {
return self.percentDrivenTransition;
}
else
{
return nil;
}
}
到这里咱们就完成了自定义push
代码传送门
自定义 Present
- 自定义present和自定push类似,自定义present负责转场的是导航控制器,自定present负责的转场的是视图控制器自己.
- 视图处理的逻辑同样 ;分别实现基于 UIViewControllerAnimatedTransitioning的present 和dismiss 详细参考自定义push,下面讲下区别的地方.
// 在第一个present 推出的视图那里,咱们须要让该控制器遵照 <UIViewControllerTransitioningDelegate>
- (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; self.transitioningDelegate = self; }
须要注意的是目标VC也须要遵照该协议;这里以prepareForSegue为例
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { SecondViewController *secondVc = (SecondViewController *)segue.destinationViewController; // 注意必定要把目标值 也做为当前 UIViewControllerTransitioningDelegate的代理人 secondVc.transitioningDelegate = self; [super prepareForSegue:segue sender:sender]; }
同时目标VC 遵照UIViewControllerTransitioningDelegate
- (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; self.transitioningDelegate = self; // 添加屏幕边缘手势 UIScreenEdgePanGestureRecognizer *edgePagGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgeAction:)]; edgePagGesture.edges = UIRectEdgeLeft; // 设置什么便捷滑入 [self.view addGestureRecognizer:edgePagGesture]; }
详细的代码这里就不贴出来了.
详情代码
github