VCTransitionsLibrary –自定义iOS交互式转场动画的库

简介

VCTransitionsLibrary 提供了许多适用于入栈,出栈,模态等场景下控制器切换时的转场动画.它本身提供了一个定义好的转场动画库,你可以拖到自己工程中直接使用;也提供了许多拥有不同转场动画效果”互动控制器”,你可以直接使用这些控制器来和自定义动画效果配合使用;而不是自己控制去控制交互.

最新示例: 点击下载

注意: 自定义视图控制器的转场动画为iOS7 + 通过 UIViewControllerTransitioningDelegate协议, UINavigationControllerDelegate协议和 UITabBarControllerDelegate 协议提供的系统级别的支持.这个库的意义在于定义了常用的动画效果,并封装了常用的交互操作,简化了iOS交互式转场动画的编码量!

快速入门

运行环境

  • iOS 7+
  • ARC

安装

使用 CocoaPods 安装

pod "VCTransitionsLibrary"

手动安装

把文件 AnimationControllers 和 InteractionControllers 文件夹下所有代码复制到工程中即可.

使用

在自定义转场动画时,有两类关键的类:

  • 动画控制器 –  这个类是用来实现自定义动画的.但你声明想要使用自定义动画时,你应该提供一个动画控制器.这个类会实现需要的动画,完成时会通知框架.
  • 交互控制器 – 这个类是用来管理交互的-那些通常由某个手势空控制的交互,允许用户通过滑动,轻扫或执行其他操作来实现两个视图控制器的导航.必须指出的是,交互控制器允许导航取消,例如,一个用户可以在正在导航至某一页面时,突然改变主意,然后取消了操作.

注意: 动画和交互是完全独立的,这意味着你可以在其他任何自定义控制器上独立使用交互控制器-很酷!

使用动画控制器

AnimationControllers 文件夹中提供了许多可以整合进你的工程中的动画控制器:

自定义模态控制器显示/隐藏的动画

UIViewControllerTransitioningDelegate 协议被用来在模态控制器显示/隐藏时提供一个动画控制器.当一个视图控制器被模态显示或隐藏时,它的transitioningDelegate属性用来提供UIViewControllerTransitioningDelegate协议的支持.担当代理角色的类,通过 animationControllerForPresentedController: presentingController: sourceController: 方法返回模态显示时的动画, 通过 animationControllerForDismissedController: 返回模态消失时的动画即可.

自定义顶部导航的转场动画

UINavigationController 有一个

id<UINavigationControllerDelegate> delegate 属性.只需要让它的代理通过 navigationController: animationControllerForOperation: fromViewController: toViewController: 返回某个动画效果即可.

为了同时设置出栈/入栈都合适的动画效果(或者说,出栈/入栈时能使用相反方向的动画),你可以参考下面代码:

- (id<UIViewControllerAnimatedTransitioning>)navigationController:
                                (UINavigationController *)navigationController
   animationControllerForOperation:(UINavigationControllerOperation)operation
                fromViewController:(UIViewController *)fromVC
                  toViewController:(UIViewController *)toVC {

    // 出栈时,要反转动画方向.
    _animationController.reverse = operation == UINavigationControllerOperationPop;

    return _animationController;
}

自定义底部标签栏导航的转场动画

UITabBarController 有一个 id<UITabBarControllerDelegate> delegate属性,只需要让它的代理通过tabBarController: animationControllerForTransitionFromViewController: toViewController:返回某个动画效果即可.

为了给动画一个合适的方向,你可以比较两个视图控制器的索引:

- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC {

    NSUInteger fromVCIndex = [tabBarController.viewControllers indexOfObject:fromVC];
    NSUInteger toVCIndex = [tabBarController.viewControllers indexOfObject:toVC];

    _animationController.reverse = fromVCIndex < toVCIndex;
    return _animationController;
}

使用交互控制器

交互控制器和动画控制器配合使用,可以实现交互式的动画转场效果,比如可以让用户通过手势来控制页面间的导航.交互控制器允许用户在一个转场动画中前进,后退,甚至退出.

交互控制器负责给视图添加手势,并负责在用户使用某个手势时进行相应地导航操作.

模态控制器消失时的交互

UIViewControllerTransitioningDelegate 协议,也用来提供对交互式转场的支持.下面是一个结合清扫手势和翻页动画的例子:

//实例变量,通常在你的初始化方法初始化它们
CEFlipAnimationController *_animationController;
CESwipeInteractionController *_interactionController;

- (id<UIViewControllerAnimatedTransitioning>)
      animationControllerForPresentedController:(UIViewController *)presented
                           presentingController:(UIViewController *)presenting
                               sourceController:(UIViewController *)source {

    // 允许交互控制器绑定它的手势识别器.
    [_interactionController wireToViewController:presented 
                                    forOperation:CEInteractionOperationDismiss];
       _animationController.reverse = NO;
    return _animationController;
}

- (id<UIViewControllerAnimatedTransitioning>)
     animationControllerForDismissedController:(UIViewController *)dismissed {
    _animationController.reverse = YES;
    return _animationController;
}

- (id<UIViewControllerInteractiveTransitioning>)
           interactionControllerForDismissal:
                (id<UIViewControllerAnimatedTransitioning>)animator {

    // 如果有交互控制器被触发了,就直接使用它.返回nil,是为了支持用户通过点击某个按钮直接返回;此时不会触发交互控制器.
    return _interactionController.interactionInProgress
                ? _interactionController : nil;
}

出栈时的交互

UINavigationControllerDelegate 也有方法为交互式转场提供支持.一个典型的类似于上上面代码的模式:

// 实例变量,通常在你的初始化方法中初始化它们.
CEFlipAnimationController *_animationController;
CESwipeInteractionController *_interactionController;

- (id<UIViewControllerAnimatedTransitioning>)
                 navigationController:(UINavigationController *)navigationController
      animationControllerForOperation:(UINavigationControllerOperation)operation
                   fromViewController:(UIViewController *)fromVC
                     toViewController:(UIViewController *)toVC {

    // 把交互控制器绑定到你的视图控制器上.
    [_interactionController wireToViewController:toVC
                                    forOperation:CEInteractionOperationPop];

    _animationController.reverse = operation == UINavigationControllerOperationPop;

    return _animationController;
}

- (id <UIViewControllerInteractiveTransitioning>)
                         navigationController:(UINavigationController *)navigationController 
  interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController {

    //如果有交互控制器被触发了,就直接使用它.返回nil,是为了支持用户通过点击某个按钮直接返回;此时不会触发交互控制器. 
    return _interactionController.interactionInProgress
                ? _interactionController : nil;
}

用于标签栏控制器切换时的交互

UITabBarControllerDelegate 协议也为交互式转场提供了支持.但是由于代理方法在首次初始化时不被执行,所有需要其他方式来绑定交互控制器,如KVO:

@implementation TabBarViewController {
    CEFoldAnimationController *_animationController;
    CESwipeInteractionController *_swipeInteractionController;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        self.delegate = self;

        // 创建交互/动画控制器.
        _swipeInteractionController = [CESwipeInteractionController new];
        _animationController = [CEFoldAnimationController new];
        _animationController.folds = 3;

        // 使用观察者模式监测被选中的选择器的变化情况.
        [self addObserver:self
               forKeyPath:@"selectedViewController"
                  options:NSKeyValueObservingOptionNew
                  context:nil];
    }
    return self;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context
{
    if ([keyPath isEqualToString:@"selectedViewController"] )
    {
        // 把交互控制器绑定到视图控制器上.
        [_swipeInteractionController wireToViewController:self.selectedViewController
                                             forOperation:CEInteractionOperationTab];
    }
}



- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC {

    NSUInteger fromVCIndex = [tabBarController.viewControllers indexOfObject:fromVC];
    NSUInteger toVCIndex = [tabBarController.viewControllers indexOfObject:toVC];

    _animationController.reverse = fromVCIndex < toVCIndex;
    return _animationController;
}

-(id<UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController
{
    return _swipeInteractionController.interactionInProgress ? _swipeInteractionController : nil;
}

@end

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jianhuicode

带着问题写React Native原生控件--Android视频直播控件

最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法...

1K7
来自专栏GuZhenYin

C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识)

前言 上篇文章地址: C#开发移动应用系列(1.环境搭建) C#开发移动应用系列(2.使用WebView搭建WebApp应用) 今天我们来讲一下如何使用Came...

1805
来自专栏点滴积累

Cesium几个案例介绍

前言 本文为大家介绍几个Cesium的Demo,通过这几个Demo能够对如何使用Cesium有进一步的了解,并能充分理解Cesium的强大之处和新功能。其他的无...

2.3K5
来自专栏AhDung

【C#】分享一个弹出容器层,像右键菜单那样召即来挥则去

------------------201508261813更新(源码有更新、Demo未更新)------------------

672
来自专栏flutter开发者

[Flutter Widget]ExpansionPanelList

在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法,在文章的最后还是按照惯例给大家留下了一个问题。

882
来自专栏HT

拓扑图弹力布局呈现Flickr图片搜索结果

十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免...

1809
来自专栏Objective-C

Swift-MVVM 简单演练(一)

3604
来自专栏walterlv - 吕毅的博客

Visual->UIElement->FrameworkElement,带来更多功能的同时也带来了更多的限制

发布于 2017-11-13 15:55 更新于 2018-02...

413
来自专栏青玉伏案

iOS开发之自定义表情键盘(组件封装与自动布局)

  下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,Cor...

20110
来自专栏移动端开发

iOS 转场动画探究(一)

什么是转场动画:        转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和...

4275

扫码关注云+社区