iOS - 如何制作动画轨迹 [英] iOS - How to make an animation track touches

问题描述

实现跟踪触摸的平滑倒车动画的最佳方法是什么？我指的是这些动画，例如，如果用户执行滑动手势，某些元素在屏幕上平滑地生成动画，而其他元素则关闭，但如果用户反而慢慢拖动平移手势来回相同的物体将根据触摸位置以百分比的形式向前/向后移动。这可以在许多应用程序介绍中看到，也可以在转换中看到。我找到了

What is the best way to implement a smooth reversing animation which tracks touches? I am referring to those animations in which, for example, if the user executes a swipe gesture some elements smoothly animate on screen, and others off, but if the user instead slowly drags a pan gesture back and forth the same objects will move forward/backward as a percent in accordance with the touch position. This is seen in many app intros and also in transitions. I have found

• 一个教程讨论了内置工具，但只是在视图控制器转换之间，没有提供完整的粒度控制我在许多应用程序中看到（ http：//www.doubleencore。 com / 2013/09 / ios-7-custom-transitions / ）


• Jazzhands，这是IFTTT的一个套件，但这是一个打包的解决方案，可能不包括如何解决方案最好在较低级别实施（ https://github.com/IFTTT/JazzHands ）


• 这里有一个问题，其中一个答案显示了手势结束后如何执行动画（ iOS触摸，手势，动画）

• One tutorial which discusses the built-in facility for this but it is only between view controller transitions, not providing the full granular control I see in many apps (http://www.doubleencore.com/2013/09/ios-7-custom-transitions/)
• Jazzhands, which is a kit by IFTTT, but this is a packaged solution that might not cover how the solution is best implemented at a lower level (https://github.com/IFTTT/JazzHands)
• A question here for which one answer shows how you might execute an animation after a gesture ends (iOS Touch, Gestures, Animation)

我不懂 - 我使用CAAnimations和手势很舒服 - 是怎么回事mething可以是动画 和 交互式。

What I don't grasp - and I'm comfortable using CAAnimations and gestures - is how something can be both animated and interactive.

通常，当我创建一个动画，我提交动画，它从头到尾。虽然我可以在触摸继续的时候中断动画，但这似乎是笨拙的。

Typically, when I create an animation, I commit the animation and it goes from start to finish. While I could interrupt the animation as touches continue, that seems like it would be stilted.

另一方面，移动事物以响应用户输入很容易，但是没有动画。

On the other hand, moving things in response to user input is easy, but that is not animated.

如果根据动画可以改变某些内容，效果如何，但同样的动画与触摸相关联，然而仍然拥有它以便尽管动画达到完成但它并没有真正完成（变得不可逆转），除非用户释放触摸，而在交互期间的任何时候如果用户释放平移然后动画要么向后恢复根据最后的触摸位置和速度，到其起始位置或动画完成。这些要求令人费解。

How is the effect achieved where something can change according to an animation, but also have that exact same animation occur tied to touches, and yet still also have it so that although the animation reaches completion it doesn't really "finish" (become irreversible) unless the user releases touch, while at any point during interaction if the user releases panning then the animation either reverts backwards to its starting position or animates to completion depending on the last touch location and velocity. These requirements are baffling.

我看到所有涉及关键帧动画的技术的一瞥，但我不明白的是其中触摸事件与动画相交以创建我看到的这些平滑效果。

The glimpses of this technique I see all involve keyframe animations, but what I don't understand is where the touch events intersect with an animation to create these smooth effects I see.

欢迎任何提示，示例或教程。

Any tips, examples, or tutorials are most welcome.

推荐答案

我不理解 - 我很自在地使用CAAnimations和手势 - 是什么东西既可以动画也可以互动。

What I don't grasp - and I'm comfortable using CAAnimations and gestures - is how something can be both animated and interactive.

这是因为，设置动画后，您可以将动画设置为您想要的任何帧。因此，您可以根据手势的移动来跟踪动画。

It is because, having set up an animation, you can set that animation to any "frame" you wish. Thus you can track the animation in correspondence to the movement of a gesture.

这种方式的工作方式是动画是渲染树的一个特征，属于CALayer 。 CALayer实现CAMediaTiming协议。因此，CALayer的 timeOffset 确定该图层显示的动画的帧。如果一个复杂的动画涉及许多不同的层，没有问题;只需设置其共同超级层的 timeOffset ，即可控制整个动画的帧。

The way this works is that an animation is a feature of the render tree, belonging to a CALayer. CALayer implements the CAMediaTiming protocol. The timeOffset of a CALayer thus determines what "frame" of an animation that layer displays. If a complex animation involves many different layers, no problem; just set the timeOffset of their mutual superlayer, to control the frame of the entire animation.

实际上是确切地说，新的iOS 7交互式自定义过渡功能如何工作（您在问题中正确引用）。例如，在此示例代码中：

That in fact is exactly how the new iOS 7 interactive custom transition feature works (to which you rightly refer in your question). For instance, in this example code:

https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/iOS7bookExamples/bk2ch06p296customAnimation2/ch19p620customAnimation1/AppDelegate.m

...我不断更新UIPercentDrivenInteractiveTransition，告诉它用户的手势有多远，动画因此跟踪手势。现在问问自己：这有多可能了？

... I keep updating the UIPercentDrivenInteractiveTransition to tell it how far through the gesture the user is, and the animation therefore tracks the gesture. Now ask yourself: how the heck is this possible???

嗯，UIPercentDrivenInteractiveTransition反过来在幕后继续调整图层的 timeOffset 在相应的帧处描绘动画。 （你实际上可以在我的例子中添加日志记录代码，看看这是真的。）

Well, the UIPercentDrivenInteractiveTransition, in turn, behind the scenes, keeps adjusting the layer's timeOffset to portray the animation at the corresponding frame. (You can actually add logging code to my example to see that this is true.)

此外，当我在不完整的点结束手势时，动画要么赶紧去它的结束或向后运行到它的开头 - 再次，这是因为CAMediaTiming协议，它允许你更改动画的速度，包括负值以向后运行它。

Moreover, when I end the gesture at an incomplete point, the animation either hurries to its end or runs backwards to its beginning - again, this is because of the CAMediaTiming protocol, which lets you change the speed of the animation, including a negative value to run it backwards.

这篇关于iOS - 如何制作动画轨迹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！