INTERACTIVE TRANSITIONS 实时动态动画

2024-09-05 13:38

本文主要是介绍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的。

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 实时动态动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139111

相关文章

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码:效果:总结 代码:import randomimport timefrom math

Java中JSON字符串反序列化(动态泛型)

《Java中JSON字符串反序列化(动态泛型)》文章讨论了在定时任务中使用反射调用目标对象时处理动态参数的问题,通过将方法参数存储为JSON字符串并进行反序列化,可以实现动态调用,然而,这种方式容易导... 需求:定时任务扫描,反射调用目标对象,但是,方法的传参不是固定的。方案一:将方法参数存成jsON字

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06