iOS - 如何制作动画轨迹

Posted

技术标签:

【中文标题】iOS - 如何制作动画轨迹【英文标题】:iOS - How to make an animation track touches 【发布时间】:2014-03-27 02:33:13 【问题描述】:

实现跟踪触摸的平滑反转动画的最佳方法是什么?我指的是那些动画,例如,如果用户执行滑动手势,某些元素会在屏幕上流畅地动画,而其他元素则关闭,但是如果用户相反缓慢地来回拖动平移手势相同的对象将根据触摸位置以百分比形式向前/向后移动。这在许多应用程序介绍和过渡中都可以看到。我找到了

一个教程讨论了为此的内置工具,但它仅在视图控制器转换之间,不提供我在许多应用程序中看到的完整精细控制 (http://www.doubleencore.com/2013/09/ios-7-custom-transitions/) Jazzhands,这是 IFTTT 的一个套件,但这是一个打包的解决方案,可能无法涵盖如何在较低级别以最佳方式实施该解决方案 (https://github.com/IFTTT/JazzHands) 这里有一个问题,其中一个答案显示了在手势结束后如何执行动画 (iOS Touch, Gestures, Animation)

我不明白 - 而且我很习惯使用 CAAnimations 和手势 - 是如何让某些东西既动画 交互式 .

通常,当我创建动画时,我会提交动画,它会从头到尾进行。虽然我可以在触摸继续时打断动画,但这似乎会做作。

另一方面,根据用户输入移动物体很容易,但这不是动画。

如果某些东西可以根据动画进行更改,但也有与触摸相关的完全相同的动画发生时,效果是如何实现的,但仍然有它,因此尽管动画完成了它除非用户释放触摸,否则不会真正“完成”(变得不可逆转),而在交互过程中的任何时候,如果用户释放平移,则动画要么返回到其起始位置,要么根据最后的触摸位置和速度动画完成.这些要求令人费解。

我看到的这种技术的一瞥都涉及关键帧动画,但我不明白的是在哪里触摸事件与动画相交以创建我看到的这些平滑效果。

欢迎提供任何提示、示例或教程。

【问题讨论】:

这个问题 - ***.com/q/4720122/189804 - 它的答案可能会对您有所帮助。您可以通过更改符合 CAMediaTiming 的对象的 timeOffset 属性来定义动画并沿路径移动动画。 【参考方案1】:

我不明白——而且我很喜欢使用 CAAnimations 和手势——是如何让事物既具有动画效果又具有交互性。

这是因为,在设置了动画之后,您可以将该动画设置为您希望的任何“帧”。因此,您可以根据手势的移动跟踪动画。

其工作方式是动画是渲染树的一个特征,属于 CALayer。 CALayer 实现 CAMediaTiming 协议。 CALayer 的timeOffset 因此决定了该层显示的动画的“帧”。如果一个复杂的动画涉及许多不同的层,没问题;只需设置它们相互超层的timeOffset,即可控制整个动画的帧数。

事实上,这正是新的 iOS 7 交互式自定义转换功能的工作原理(您在问题中正确地提到了这一点)。例如,在此示例代码中:

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

...我不断更新 UIPercentDrivenInteractiveTransition 以告诉它用户的手势有多远,因此动画会跟踪手势。现在问问自己:这到底是怎么可能的???

好吧,反过来,UIPercentDrivenInteractiveTransition 在幕后不断调整图层的timeOffset 以在相应帧处描绘动画。 (您实际上可以将日志记录代码添加到我的示例中以查看是否正确。)

此外,当我在一个不完整的点结束手势时,动画要么匆忙结束,要么倒退到开始 - 再次,这是因为 CAMediaTiming 协议,它允许您更改动画的speed ,包括一个负值来向后运行。

【讨论】:

这里有一个关于这个主题的非常好的教程:ronnqvi.st/controlling-animation-timing 一旦你理解了这一点——一旦一分钱一落千丈——一个全新的世界就打开了。 查看 Apple 的技术说明:developer.apple.com/library/ios/qa/qa1673/_index.html 那个教程就是钱。我无法相信这实际上比我想象的要简单得多。我从来没有想过以这种方式使用 timeOffset+speed 属性,但现在它是如此明显而精彩。我觉得我在我的应用程序中做了一些非常酷的事情,但是使用这种技术的应用程序总是感觉如此流畅且很好地与之交互。我迫不及待地想掌握它。非常感谢马特。

以上是关于iOS - 如何制作动画轨迹的主要内容,如果未能解决你的问题,请参考以下文章

如何将canvas轨迹保存为动画

怎么把gis的轨迹导出来

如何做出一条沿着轨迹慢慢显示的箭头

圆球沿着椭圆轨迹做动画

使用ivx制作快闪倒计时的经验总结

【小程序】地图|绘制GPX轨迹