iOS - 如何制作触摸跟踪动画

8
什么是实现跟踪触摸的平滑反转动画的最佳方法?我指的是在用户执行滑动手势时,一些元素平稳地出现在屏幕上,其他元素则不显示,但是如果用户缓慢地拖动平移手势来回移动,则相同的对象将按照触摸位置向前/向后移动百分比。这在许多应用程序介绍和转换中都可以看到。我已经找到了解决方案。

我不明白的是 - 我很舒适使用CAAnimations和手势 - 如何将某些东西既动画化交互式

通常,当我创建动画时,我会提交动画并从头到尾播放。虽然我可以在触摸继续时中断动画,但那似乎会很生硬。
另一方面,根据用户输入移动物体很容易,但那不是动画。
如何实现这种效果:某事物可以根据动画发生变化,但也可以根据触摸发生完全相同的动画,并且即使动画达到完成状态,除非用户释放触摸,否则它并不真正“完成”(变得不可逆),而在交互过程中,如果用户在任何时候释放滑动,则动画会向后回退到其起始位置或根据最后的触摸位置和速度完成动画。这些要求令人困惑。
我看到的这种技术的片段都涉及关键帧动画,但我不理解触摸事件与动画相交以创建我看到的这些平滑效果的位置
欢迎提供任何提示、示例或教程。

这个问题- https://dev59.com/vW445IYBdhLWcg3wuspT -以及其中的答案可能会对您有所帮助。您可以定义一个动画,并通过更改符合CAMediaTiming的对象的timeOffset属性来沿着路径移动动画。 - Adam Eberbach
1个回答

14
我不理解的是,尽管我熟悉CAAnimations和手势操作,但如何使某些东西既可以动画又可以交互。 因为在设置完动画后,您可以将该动画设置为任何所需的“帧”。 因此,您可以跟踪手势移动与动画的对应关系。 这是因为动画是呈现树的一个特征,属于CALayer。 CALayer实现了CAMediaTiming协议。 因此,CALayer的timeOffset确定该图层显示动画的哪个“帧”。 如果复杂的动画涉及许多不同的图层,则没有问题; 只需设置它们的共同superlayer的timeOffset即可控制整个动画的帧。 事实上,这正是新的iOS 7交互式自定义转换功能的工作方式(您在问题中正确提到的)。 例如,在此示例代码中:

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

我不断更新UIPercentDrivenInteractiveTransition以告诉它用户手势完成的程度,因此动画跟踪手势。现在问问自己:这怎么可能??
UIPercentDrivenInteractiveTransition在幕后调整层的timeOffset来展示对应帧的动画。(你实际上可以向我的示例添加日志代码以查看这一点。)
此外,当我在不完整的点结束手势时,动画要么加速到结尾,要么倒着运行到开头 - 这再次是由于CAMediaTiming协议,它允许您更改动画的速度,包括负值以使其倒放。

1
这里有一个非常好的关于这个主题的教程:http://ronnqvi.st/controlling-animation-timing/ 一旦你理解了这个 - 就像钱币掉落一样 - 一个全新的世界就会展现在你面前。 - matt
1
请查看苹果的技术说明:https://developer.apple.com/library/ios/qa/qa1673/_index.html - matt
1
那个教程真是太棒了。我简直不敢相信这实际上比我想象的要简单得多。我从未想过可以这样使用timeOffset+speed属性,但现在它显得如此明显而又精彩。我觉得我在我的应用程序中做了一些很酷的事情,但是采用这种技术的应用程序总是感觉非常流畅和精致。我迫不及待地想掌握它。非常感谢你,Matt。 - SG1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接