iOS CATransition 自定义转场动画

作者: Civel_Xu | 来源:发表于2016-06-24 11:55 被阅读3162次

CATransition

CATransition 是CAAnimation的子类（如下图所示），用于控制器和控制器之间的转场动画。能够来自定义系统的push和present。实现页面间的动画效果。

CAAnimation 关系图

转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤：

创建转场动画
设置转场类型、子类型（可选）及其他属性画
设置转场后的新视图并添加动画到图层

ios的画面切换的动画效果的API主要通过调用系统已定义的动画效果实现，这些效果已基本囊括开发的需求，如果需要更加复杂的效果，可以考虑CATransition来实现。

以下是基本的四种效果

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” 按钮的效果.

// 使用场景 1


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,不然会两个效果叠加

// 使用场景2

+ (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

CATransition-Basic -代码传送门

下面通过自定义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

扩展 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

iOS CATransition 自定义转场动画

CATransition

转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤：

自定义 Push

自定义 Present

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小小文

动画相关

iOS 开发

calayer及其子类与动画相关的

iOS

首页投稿（暂停使用，暂停投稿）

iOS Developer

iOS开发资料收集区