[翻译] INTERACTIVE TRANSITIONS 实时动态动画

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的。

- ( 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，使用同样的路径来改变这个动画：

// 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。

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。通过这个状态，我们检查这个用户是否想取消这个动画或者是完成他。为了检查这个，我们只需要考虑手势的速率。不要与速度混淆了，速率可以被看做是方向。

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

// 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上告知我吧。