本文转载至 http://blog.jobbole.com/51588/

本文由 伯乐在线 - studentdeng 翻译自 Chris Eidhof。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。

自定义动画

iOS 7 对我来说最激动人心的特性就是新的视图控制器切换API(View Controller Transitioning API)。 iOS 7 之前,View Controller之间切换,我需要创建自定义的transitions。 而且这些方法都支持不完整,让人头疼。在transitions中增加交互功能就更难了。

在开始这篇文章之前,我要提醒一下:这是一个新的API,我们尽最大努力让他可以实用,但是并不能保证是最佳。可能需要至少一个月后才能确定,这篇文章是不是最佳的实用方案,这里只是一个对新功能的探索。如果有更好的使用这个API的方法,请联系我们,这样就可以修正这篇文章。

在开始介绍这个API之前,我们需要知道导航控制器的默认行为在iOS7下已经改变了:导航控制器下,切换2个view controller的动画有一点细微的改变,变得更有交互性。例如,当你希望弹出一个view controller时,可以从屏幕左边开始拖动,把整个内容拖动到屏幕右边。

让我们仔细看一下这个API,我发现这个被重度使用的接口是协议并不是一个实体。虽然一上来看上去有一点怪,但是我喜欢这个API,它给了我们更多的灵活性。我们从简单开始:用自定义动画代替原有的view controller的push动画(这里是sample project 在github)。我们首先需要实现这个新的 UINavigationControllerDelegate 方法:

1
2
3
4
5
6
7
8
9
10
11
- (id<UIViewControllerAnimatedTransitioning>)
               navigationController:(UINavigationController *)navigationController
    animationControllerForOperation:(UINavigationControllerOperation)operation
                 fromViewController:(UIViewController*)fromVC
                   toViewController:(UIViewController*)toVC
{
    if (operation == UINavigationControllerOperationPush) {
        return self.animator;
    }
    return nil;
}

我们可以观察一下这种类型的操作(push 和 pop)返回一个不同的 animator。如果我们分享代码的话,这个可能是一个对象。我们可能需要把这个变量通过property保存下来。我们也可以为不同的操作创建不同的对象,这里有很高的灵活性。

让这个动画运行起来,我们创建一个自定义对象实现 UIViewControllerContextTransitioning 协议。

1
2
3
@interface Animator : NSObject <UIViewControllerAnimatedTransitioning>
 
@end

这个协议要求我们实现2个方法,其中一个是描述动画的执行时间

1
2
3
4
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.25;
}

另一个是描述动画的执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    [[transitionContext containerView] addSubview:toViewController.view];
    toViewController.view.alpha = 0;
 
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        fromViewController.view.transform = CGAffineTransformMakeScale(0.1, 0.1);
        toViewController.view.alpha = 1;
    } completion:^(BOOL finished) {
        fromViewController.view.transform = CGAffineTransformIdentity;
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
 
    }];
 
}

这里你可以看到这个协议是怎么用的:没有提供实体的对象参数,而是通过这个类型 id 得到transitionContext 唯一的最重要的东西就是在完成动画之后要调用 completeTransition 这个告诉 transitionContext 我们已经完成动画并且相应的更新了 view controller的状态。其他代码是标准的,我们通过transitionContext得到2个UIViewController,然后使用简单的 UIView 动画,这里我们很简单的做了一个zooming的动画

注意,我们只是写了push的自定义动画,当view controller pop时,iOS系统还是会使用默认的滑动动画。而且,实现这个方法后。导航栏也不能交互了(就是从左到右拖动实现pop view controller)。下面完善它

交互动画

让之前的动画变得能够交互起来非常简单。我们需要实现另一个UINavigationControllerDelegate

1
2
3
4
5
- (id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController*)navigationController
                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController
{
    return self.interactionController;
}

注意,如果在一个不能交互的动画中,这里会返回nil。(译注:当不能交互时 self.interactionController 为 nil)

interactionController是UIPercentDrivenInteractionTransition的实例,没有必要更多的设置。我们通过创建拖动手势(UIPanGestureRecognizer)来实现:

1
2
3
4
5
6
if (panGestureRecognizer.state == UIGestureRecognizerStateBegan) {
    if (location.x >  CGRectGetMidX(view.bounds)) {
        navigationControllerDelegate.interactionController = [[UIPercentDrivenInteractiveTransition alloc] init];
        [self performSegueWithIdentifier:PushSegueIdentifier sender:self];
    }
}

只有当用户在屏幕右边操作时,我们才设置动画是可以交互的(通过设置interactionController 属性)。然后我们调用performSegueWithIdentifier(或是不用storyboards,直接push view controller) 在这个手势变化中,我们调用interactionController 的一个方法 updateInteractiveTransition:

1
2
3
4
else if (panGestureRecognizer.state == UIGestureRecognizerStateChanged) {
    CGFloat d = (translation.x / CGRectGetWidth(view.bounds)) * -1;
    [interactionController updateInteractiveTransition:d];
}

这里根据拖动的距离设置百分比,非常cool的事情是交互控制器(interactionController)和 动画控制器(animation controller)相互协作。而且因为是普通的 UIView 动画,它控制着动画的进程。我们不需要处理他们之前的事情, 所有的事情都在背后默默的自动搞定了。

最后,当手势停止或是取消掉,我们需要调用interaction controller相应的方法

1
2
3
4
5
6
7
8
else if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
    if ([panGestureRecognizer velocityInView:view].x < 0) {
        [interactionController finishInteractiveTransition];
    } else {
        [interactionController cancelInteractiveTransition];
    }
    navigationControllerDelegate.interactionController = nil;
}

当切换动画完毕时,设定interactionController为nil非常重要。如果下一个动画是非交互的,我们不希望得到一个奇怪的 interactionController

现在我们已经有一个完整的自定义的可交互的过度变换(transition)了。通过普通的拖动手势和一个UIKit提供的实体对象,几行代码就搞定了。对于大多数的自定义交互过度变换,你可以在这里停下来,用上面提到的方法做任何你想做得动画 或是交互。

GPUImage自定义动画

我们现在已经能够实现一个完整的自定义动画了,可以不用UIView 甚至Core Animation,做自己喜欢的动画。一开始,我用Core Image实现了一个项目Letterpress-style。但是在我的旧iPhone4上面只能跑到大约9FPS,这个和我所期望的60FPS差距太大了。

但是当我使用GPUImage后,实现一个非常漂亮的自定义动画效果变得非常简单。我们希望这个动画能够做到像素级的消融在2个view controller切换的时候。这个是通过分别对2个view controller 截屏,然后应用GPUImage的图片滤镜实现的。

首先,我们创建一个自定义类,实现animation 和 interactive transition 协议。

1
2
3
4
5
6
7
8
9
10
11
@interface GPUImageAnimator : NSObject
  <UIViewControllerAnimatedTransitioning,
   UIViewControllerInteractiveTransitioning>
 
@property (nonatomic) BOOL interactive;
@property (nonatomic) CGFloat progress;
 
- (void)finishInteractiveTransition;
- (void)cancelInteractiveTransition;
 
@end

为了让这个动画跑的飞快,我们只把图片传给GPU一次,然后把所有的图像处理绘制交给GPU,而不是传给CPU(GPU和CPU之间的数据传输非常慢)。通过GPUImageView,我们可以用OpenGL绘制动画效果(不需要手动编写底层的OpenGL代码,我们可以继续编写上层代码)

创建这样的滤镜链非常方便。这里可以看一下下面的例子。有一点挑战的是实现动态的滤镜。GPUImage不能给我们直接提供动画效果。这里我们通过在每一帧的时候更新滤镜来实现动画的绘制。我们使用CADisplayLink类来做这个。

1
2
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(frame:)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

在frame:方法中,我们根据时间更新动画进度,然后更新滤镜

1
2
3
4
5
6
7
8
- (void)frame:(CADisplayLink*)link
{
    self.progress = MAX(0, MIN((link.timestamp - self.startTime) / duration, 1));
    self.blend.mix = self.progress;
    self.sourcePixellateFilter.fractionalWidthOfAPixel = self.progress *0.1;
    self.targetPixellateFilter.fractionalWidthOfAPixel = (1- self.progress)*0.1;
    [self triggerRenderOfNextFrame];
}

以上就是我们所有要讲得了。在交互变换中,我们需要确保我们的进度是根据手势识别设置的,而不是根据时间。但是剩下的代码几乎都一样了。

这个真的太强大了,你可以使用GPUImage提供的任何滤镜或是自己写的OpenGL代码来实现上面的效果。

小结

我们这里仅仅提到了导航控制器下面的2个 view controller 之间的动画,事实上你可以做相同的事情在tabbar controller 或是自定义的container view controller。而且 UICollectionViewController 现在已经可以在layout上面自动实现交互动画了。他们都是使用相同的机制。这个真的太强大了。

当我和Orta提到这个API时,他指出他已经使用这个功能创建了一些轻量级的view controller。不要在每一个view controller 保存管理动画的代码,而是创建一个新的view controller,然后实现2个view controlller视图切换时的自定义的动画效果。

更多

iOS 7 新特性:视图控制器切换API的更多相关文章

  1. 自定义视图控制器切换(iOS)

    在iOS开发过程中,通常我们会使用UINavigationController,UITabbarController等苹果提供的视图控制器来切换我们的视图.在iOS5之前,如果要自定义容器视图控制器很 ...

  2. iOS Programming View Controllers 视图控制器

    iOS Programming View Controllers  视图控制器  1.1  A view controller is an instance of a subclass of UIVi ...

  3. iOS CoCoa编程中视图控制器与视图类(转)

    分类: iPhone2012-05-28 11:19 837人阅读 评论(0) 收藏 举报 cocoa编程iosuinavigationcontrolleruiviewiphone iPhone编程规 ...

  4. iOS 9应用开发教程之iOS 9新特性

    iOS 9应用开发教程之iOS 9新特性 iOS 9开发概述 iOS 9是目前苹果公司用于苹果手机和苹果平板电脑的最新的操作系统.该操作系统于2015年6月8号(美国时间)被发布.本章将主要讲解iOS ...

  5. iOS 动画学习之视图控制器转场动画

    一.概述 1.系统会创建一个转场相关的上下文对象,传递到动画执行器的animateTransition:和transitionDuration:方法,同样,也会传递到交互Controller的star ...

  6. iOS 8 新特性

    这篇文章会介绍iOS8开发相关的主要特性. App 插件 通过支持插件,iOS8让我们可以系统指定的区域进行扩展,也就是为用户的特定需求提供自定义的方法.例如:可以通过App插件帮助用户分享他们的内容 ...

  7. iOS学习22之视图控制器

    1.自定义视图 1> 概述   定义视图:系统标准UI之外,自己组合而出的新的视图. 定义视图的优点: iOS提供了很多UI组件,借助它们我们可以实现不同的功能.尽管如此,实际开发中,我们还需要 ...

  8. iOS开发——新特性OC篇&IOS9 系统新特性

    IOS9 系统新特性 2015年6月89号凌晨召开的WWDC 2015苹果开发者大会发布了全新的iOS 9系统,PC6小编今天给大家整理了这次iOS9的系统更新带来了哪些新的功能与升级,本次新功能一览 ...

  9. iOS开发——新特性OC篇&IOS9 SDK新特性

    iOS9 SDK新特性 WWDC 2015苹果开发者大会是移动开发者一年一度的盛会,InfoQ中文站除了第一时间整理Keynote内容分享给大家之外,还邀请了资深的一线开发者分享他们的收获.本文为王巍 ...

随机推荐

  1. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  2. python3.x +django + nginx + uwsgi 搭建web服务

    最近一直在用django开发自己的网站.在开发和线上环境的对接过程中遇到了许多的坑.所以想以一个老鸟的经历来写一下怎么 搭建web服务 一.python3.x .django .nginx .uwsg ...

  3. django Models cross file ---- 跨app引用文件

    一.django 的跨app引用文件是通过import 来实现的,但是import 的路径查找和标准的import 不太一样,django里面更加方便了 二.例子 1.project 结构说明 [ji ...

  4. C++知识点 笔试常见

    C++知识点   一.#include “filename.h”和#include <filename.h>的区别 #include “filename.h”是指编译器将从当前工作目录上开 ...

  5. Android Studio 使用感受 错误解决

    刚到公司不久,公司叫我用Android studio软件,曾经一直在用的是eclipse ADT.突然接触到的新名词让我有点适应只是来. 好吧,既然是公司要求,肯定有它的道理.就从网上下载了它的安装包 ...

  6. CCCallFunc CCCallFuncN CCCallFuncND的区别和使用

    CCCallFunc CCCallFuncN CCCallFuncND都用来创建带有回调函数的动作,区别主要在于回调函数是否带有参数 CCCallFunc是执行对应的回调函数,其中回调函数不可带参数. ...

  7. 每日英语:The Perils Of Giving Advice

    I know what you should do and here's my advice. How many times have you heard that (and groaned)? gr ...

  8. Flashtext 使用文档 大规模数据清洗的利器-实现文本结构化

    1.1 安装 pip install flashtext 1.2 使用例子 1.2.1 关键字提取 >>> from flashtext import KeywordProcesso ...

  9. Delphi之Raise抛出异常

    相关资料: http://blog.csdn.net/a20071426/article/details/10160171 实例代码: unit Unit1; interface uses Windo ...

  10. mysql学习笔记2--mysql的基本使用

    4. 运行和关闭MySQL服务器 首先检查MySQL服务器正在运行与否.在资源管理器查看有没有mysqld的进程,如果MySQL正在运行,那么会看到列出来的 mysqld 进程.如果服务器没有运行,那 ...