INTERACTIVE TRANSITIONS 实时动态动画

翻译不到位处敬请谅解,感谢原作者分享精神

原文链接 http://www.thinkandbuild.it/interactive-transitions/

源码下载 http://pan.baidu.com/s/1i3HW5FZ

It’s been a while and after some long due time off I’m finally back with a new iOS tutorial.

I wanted to add some more details to my previous post showing you how to implement an interactive transition and that’s exactly what I’m going to do with this article!

有好长一阵子,我没有写一个新的iOS教程了。

我想给我之前的博文添加一些细节,教你怎么实现实时动态交互的动画效果,这篇文章就专门研究这个。

INTERACTIVE VS ANIMATED TRANSITION(实时动态动画 VS 普通动画)

The main difference between these two ways of performing a transition is obviously how they progress from start to finish.

With an animated transition we define the timing, the initial and final state withtransitionDuration and animateTransition methods ofUIViewControllerAnimatedTransitioning. So the animation just runs from 0 to 100% in a pre-defined time. Yes, you could also perform keyframe animation having some more control over the flow, but you still end up with a complete animation cycle, from 0 to 100%.

The interactive transition is a great way to create a synergy with the user. He (or she) becomes the director of the transition, driving the animation flow and cancelling the transition if need be.

这两种动画最主要的不同,很明显,就是,他们如何从动画的开始到动画结束的。

对于普通动画,我们定义了时间,时间间隔,动画截止时的状态,通过UIViewControllerAnimatedTransitioning中的这些方法transitionDuration以及animateTransition方法。所以,这个动画效果就只会在预先定义的时间里面执行。当然,你也可以使用关键帧动画来增加一些更好的效果,但始终,这个动画只会从0运行到100%,一个完整的动画周期。

实时动态动画是一种和用户实时交互的动画,用户能够实时控制这个动画,他想取消就取消,他想继续就继续。

CUSTOM TRANSITION, QUICK RECAP(自定义转场动画的快速概要)

In my previous post we’ve created a custom transition to present a modal controller essentially following these steps:

1) Creating a UIViewControllerTransitioningDelegate. Its main role is returning an object responsible for the animation.

2) Creating that object. It has to implement the UIViewControllerAnimatedTransitioningprotocol.

3) The method animateTransition is part of that protocol and here we’ve “drawn” the animation thanks to the transition context. The context (UIViewControllerContextTransitioning) comes with important information such as the “from”, the “to” controllers and the containerView where the animation takes place.

You can take a look at my for more details.

在我之前的文章当中,我们创建了一个自定义的转场动画,遵循以下的几个步骤:

1)创建一个UIViewControllerTransitioningDelegate。他的核心就是返回一个代表这个动画的对象。

2)创建一个对象,他必须实现UIViewControllerAnimatedTransitioning协议。

3)animateTransition是那个协议中的一部分,在这里,我们来通过动画context来“绘制”这个动画。这个context(UIViewControllerContextTransitioning)包含了重要信息,包括来自于哪个controller,去哪个controller,以及发生动画的容器containerView。

你可以在我之前的博文中获取更多的细节。

GO INTERACTIVE, THE EASIEST WAY(实时动态动画,最简单的方式)

So far so good, those steps are still needed to build an interactive transition, but obviously we have to add something more to this procedure to achieve the interactivity.

Our goal is basically to tie the user’s touch position to the current animation progress, so we have to implement a gesture handler that takes that into account. Then we can convert this information in the transition progress:

越快越好,为了实现实时动画效果,以下几步还是需要的,很明显,我们会添加一些新步骤来达到实时动画的目的。

我们最基本的目标就是绑定用户的手势触目点到当前的动画progress中,所以,我们必须实现一个手势,来达到那个目的。只有这样,我们才能够把这些信息与progress实时转换:

First, we have to implement two more methods from UIViewControllerTransitioningDelegate. We have already implemented the two that return the UIViewControllerAnimatedTransitioning object (step 2 of the previous list), namely animationControllerForPresentedController:etcetc… and animationControllerForDismissedController.

第一步,我们还得实现另外两个UIViewControllerTransitioningDelegate的方法。我们已经实现过了那两个方法,他们返回了UIViewControllerAnimatedTransitioning对象(之前博文中的第二步),起名叫animationControllerForPresentedController:以及animationControllerForDismissedController。

Now we have to inform the system that we want to perform an interactive transition, so it needs an object that implements the UIViewControllerInteractiveTransitioningprotocol. These two methods are interactionControllerForPresentation and interactionControllerForDismissal. Again, the system needs an object to guide the presentation and the dismissal of the controller, and again, this object has to implement a protocol, the UIViewControllerInteractiveTransitioning.

现在我们需要通知系统,我们想执行实时动画转场,所以系统需要一个对象实现了UIViewControllerInteractiveTransitioning协议。这两个方法就是interactionControllerForPresentation以及interactionControllerForDismissa。系统还需要一个对象来指引展示以及消退的controller。所以,这个对象需要实现一个协议,那就是UIViewControllerInteractiveTransitioning。

This logic is really similar to what we did to create the “standard” custom transition.

这个逻辑与我们之前实现的标准定制的转场动画很相似。

LET’S CODE(代码)

Open the project and check the group “Controllers”. We have 2 classes here: mainController and modalController. Their roles are obvious: mainController is the presenter of the modalController, nothing more.

In the group Transition you can find the core of this tutorial: the TransitionManager. This object contains all the transition logic, from the animation to the gesture handler, and it implements all the protocols that I’ve previously told you about.

打开这个工程,检查一下controllers,我们有两个类在里面,mainController以及modalController。这个顺序显而易见:mainController会推出modalController。

还有一个文件夹Transition,那就是这篇教程的核心:变换管理器。这个对象包含了所有的实现转场动画的逻辑,从动画到手势,他实现了所有我前文中我所提到的协议。

THE GESTURE RECOGNISER(手势识别)

We want to tie the user interaction to the transition progress. So let’s review the code needed for this operation. Open the TransitionManager.m file.

The function setMainController is the setter for the mainController property, that is just a reference to the current Main Controller.

我想把用户交互与转场动画的progress绑定在一起。所以,我们来复习以下这个操作需要的代码。打开这个文件TransitionManager.m。

这个方法setMainController是mainController属性的setter方法,他是用来标示是当前的controller的。

1
2
3
4
5
6
7
8
9
- (void)setMainController:(MainViewController *)mainController{
     
    _mainController = mainController;
    UIScreenEdgePanGestureRecognizer *panGesture = [[UIScreenEdgePanGestureRecognizer alloc]initWithTarget:self action:@selector(gestureHandler:)];
    panGesture.edges = UIRectEdgeLeft;
     
    [[self.mainController.view window] addGestureRecognizer:panGesture];
     
}

While we set this property we attach a gesture recognizer for theUIScreenEdgePanGestureRecognizer to the window view and we set its side as left.

Note: we use the window view because that way the gesture is recognised in the entire application. How to set the recogniser obviously depends on your specific needs.

At this point, when user moves his finger from the left side of the screen to the right, the gesture handler is called.

我们设置这个属性,来绑定UIScreendgePanGestureRecognizer到window的view上,并设置边界为left。

注意:我们设置成window view是因为在那种情况下,这个手势是整个程序中都能识别的。如何设置这个手势取决于你自己的需求。

在这时,当用户在屏幕左端移动手指到屏幕右端,这个手势就触发了。

UIPERCENTDRIVENINTERACTIVETRANSITION(百分比驱动型动态交互动画)

Now that a part of the user interactions is tied to the transitionManager it’s time to grab this information and put it to good use.

我们已经把用户的交互绑定到了transitionManager中,是时候来抓取信息使用了。

I previously mentioned the UIViewControllerInteractiveTransitioning, but as you can see the TransitionManager is not implementing it. It is, in fact, subclassing theUIPercentDrivenInteractiveTransition.

我之前提过了方法UIViewControllerInteractiveTransitioning,但是,这个TransitionManager没有实现他。因为,事实上,他是继承至UIPercentDrivenInteractiveTransition的。

From the documentation:

这个是官方文档的描述:

`A percent-driven interactive transition object drives the custom animation between the disappearance of one view controller and the appearance of another. It relies on a transition animator delegate (a custom object that adopts the UIViewControllerAnimatorTransitioning protocol) to set up and perform the animations.`

这个百分比驱动的交互转场对象可以酷动自定义的动画,介于一个controller将要消失以及另外一个controller将要出现。他以来与一个转场动画器的代理,来设置以及执行这些动画。

This class has 3 important methods that work together with the gesture handler to drive the animation.

这个类有着3个方法,一起配合手势来驱动这个动画效果。

• updateInteractiveTransition: used to set the progress of the transition from 0.0 to 1.0.设置进程百分比(从0.0到1.0)

• cancelInteractiveTransition: in case we wanted to abort the transition (for example when the user aborts the gesture)放弃动画

• finishInteractiveTransition: to mark that the transition can be completed in cases when the user only partially completes the gesture (but we want to assume he intends to complete the transition).完成动画

So, having already created the animation (it is described in the animateTransition: method), we now build the gesture handler that, together with the UIPercentDrivenInteractiveTransition method, is going to make the interaction work.

所以,我们已经创建了这个动画(在这个方法animateTransition:中),现在,我们来建一个手势来控制它,一起配合UIPercentDrivenInteractiveTransition这个方法,来实现交互效果。

THE GESTURE RECOGNIZER HANDLER(手势识别以及控制)

Stay in the TransitionManager.m file and check the gestureHandler function.

进入TransitionManager.m文件中,查看下gestureHandler方法。

This is a standard gesture handler that, in this case, has to recognize pan gestures from the left side of the screen, nothing special.

这是一个标准的手势,在这个情形下,必须识别拖拽手势,从屏幕的左侧开始,没有什么特别的。

When the gesture state is UIGestureRecognizerStateChanged we instantiate the modalController using the same routine we adopt for the animated custom transition:

当这个动画的状态变为UIGestureRecognizerStateChanged,我们实例化这个modalController,使用同样的路径来改变这个动画:

1
2
3
4
5
6
7
8
9
10
// Instantiate the modal controller
self.modalController = [[ModalViewController alloc]init];
self.modalController.transitioningDelegate = self;
self.modalController.modalPresentationStyle = UIModalPresentationCustom;
 
// Here we could set the mainController as delegate of the modal controller to get/set useful information
// Example: self.modalController.delegate = self.mainController;
 
// Present the controller
[self.mainController presentViewController:self.modalController animated:YES completion:nil];

1) set a transition delegate (in this case, the TransitionManager itself).设置一个transition协议

2) set the modal presentation style to UIMoldaPresentationCustom.设置这个modal的展示风格为UIMoldaRresentationCustom

Note: in the previous tutorial I set this property to the mainController. Mistake. Fixed.

3) present the modalController from the mainController从mainController来展示这个modalController

Whit the gesture state UIGestureRecognizerStateChanged we just convert the touch location into a value ranging from 0 to 1 as it was shown in the previous image. In this code we take as reference the whole screen. So the left side is 0 and the right side is 1.

通过这个手势的状态值,我们将手势的位移转换成一个从0到1的值,刚好覆盖了整个屏幕。所以左侧刚好是0而右侧刚好是1。

1
2
CGFloat animationRatio = location.x / CGRectGetWidth([self.mainController.view window].bounds);
[self updateInteractiveTransition:animationRatio];

With these 2 rows we are translating the finger position to the progress of the animation.

用这两行代码,我们将手指的位移转换成了animation的progress。

Last but not least, the state UIGestureRecognizerStateEnded. Within this state we check wether the user wants to cancel the transition or complete it. To check user intention we just take into account the gesture velocity – not to be confused with the speed, velocity can be intended as the direction -.
If the direction is right we complete the transition otherwise we cancel it.

最后但不是很重要的,就是这个状态UIGestureRecognizerStateEnded。通过这个状态,我们检查这个用户是否想取消这个动画或者是完成他。为了检查这个,我们只需要考虑手势的速率。不要与速度混淆了,速率可以被看做是方向。

如果这个方向是对的,我们完成这个动画,如果不是,就取消他。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 3. Complete or cancel the animation when gesture ends
else if (recognizer.state == UIGestureRecognizerStateEnded) {
    //[self.finger removeFromSuperview];
     
    if (self.transitionTo == MODAL) {
         
        if (velocity.x > 0) {
            [self finishInteractiveTransition];
        }
         
        else {
            [self cancelInteractiveTransition];
        }
         
        self.modalController = nil;
    }
     
}

At this point we have implemented the interactivity with the transition and it works like a charm.

最后,我们实现了这个动态交互的转场动画,他运行得不错哦,亲。

FINAL NOTES(最后的说明)

You can see that the transition now works in two different ways.

如今这个转场动画有两种方式了。

The presentation uses the interactive transition, while the dismiss keeps the previous custom transition, but both use the same animation! This means that you can create a really complete user experience mixing together a full user interaction with some driven call to action (like a button to dismiss the current controller).

展示controller时使用了实时动态交互,同时,推出controller时能保持自定义的动画效果,这两个都用了同样的动画!这意味着,你可以创建一个完整的用户体验,混杂了一个完全的用户驱动动画或者普通动画形式。

Have fun with transitions and show me your results pinging me on Twitter!

如果你用到了这个,在Twitter上告知我吧。

[翻译] INTERACTIVE TRANSITIONS 实时动态动画的更多相关文章

  1. [翻译] POP Facebook的动画开源库

    Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it s ...

  2. iOS 转场动画探究(二)

    这篇文章是接着第一篇写的,要是有同行刚看到的话建议从前面第一篇看,这是第一篇的地址:iOS 转场动画探究(一) 接着上一篇写的内容: 上一篇iOS 转场动画探究(一)我们说到了转场要素的第四点,把那个 ...

  3. [UE4]Animation Techniques used in Paragon部分翻译及索引

    视频地址:https://www.youtube.com/watch?v=1UOY-FMm-xo 主要内容:该视频由Paragon游戏制作者Laurent Delayen(Senior Program ...

  4. 转场动画2-Pop动画

    上一篇试讲push动画,这篇分解pop动画 里面关于矩阵有不懂得,参考CATransform3D 特效详解 上图(虚拟机下,图是渣渣 ) 代码直接上 // // PopTransition.h // ...

  5. iOS学习笔记-自定义过渡动画

    代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...

  6. iOS 7 present/dismiss转场动画

    前言 iOS 7以后提供了自定义转场动画的功能,我们可以通过遵守协议完成自定义转场动画.本篇文章讲解如何实现自定义present.dismiss自定义动画. 效果图 本篇文章实现的动画切换效果图如下: ...

  7. iOS7 push/pop转场动画

    前言 iOS 7之后,苹果提供了自定义转场动画的API,我们可以自己去定义任意动画效果.本篇为笔者学习push.pop自定义转场效果的笔记,如何有任何不正确或者有指导意见的,请在评论中留下您的宝贵意见 ...

  8. 大话ASP.NET(第二篇,Angular结构篇--翻译)

    AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...

  9. CSS3特性 盒模型 动画

    转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...

随机推荐

  1. HTML标签列表总览

    超文本标记语言(简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分.HTML标签的大小写无 ...

  2. 按书上学写测试pytest

    慢慢的,这块知识也补好吧. 系统的学习框架,具体的细节,可以边百度边实现. test_three.py '''Test the Task data type.''' from collections ...

  3. 百度Webuploader 大文件分片上传(.net接收)

    前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...

  4. 【LOJ】#2497. 「PA 2017」Banany

    题解 一眼就是线段树维护点分树的dfs序嘛 代码debug一年(手动再见) 码力直线下降,坐等滚粗= = 很明显的我们需要一个点分树,然后求出以每个重心为根的树的dfs序,线段树维护一下每个点的价值- ...

  5. Linux下 rz 和 sz 命令的安装与使用

    目录 Linux下 rz 和 sz 命令的安装与使用 rz/sz命令的安装 sz命令-发送文件到本地(下载): rz命令-本地上传文件到服务器(上传): 声明 Linux下 rz 和 sz 命令的安装 ...

  6. Python使用正则

    Python中使用正则的两种方式 在Python中有两只能够使用正则表达式的方式: 直接使用re模块中的函数 import re re_string = "{{(.*?)}}" s ...

  7. 【基础知识】winfrom窗体的属性

    窗体的属性: Icon:窗体的右上角图标 FormBoarderStyle:窗体的边线样式 MaximizeBox: 最大化按钮是否可用 MinimizeBox:最小化按钮是否可用 Opacity:透 ...

  8. Linux驱动之IIC总线

    <作用> 电子设备中有很多IIC设备之间需要进行相互通信,这样就产生了IIC总线,常用来实现设备之间的数据通信.   <IIC总线结构> IIC总线只有两条线,一条是串行数据线 ...

  9. UVA1378 A funny stone game

    博弈论. 就是有一堆石子你拿走一堆中的一个,然后再向后面两堆中加两个问胜负 i<j<=k 所以我们可以直接通过sg函数计算,考虑问题的奇偶性,如果这一位是奇的我们才考虑,偶的可以模仿 然后 ...

  10. An ac a day,keep wa away

    zoj 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1334 ...