javascript - 需要帮助剖析和重新创建基于 PastryKit 的完美滚动缓动

标签 javascript unity-game-engine scroll scrollview ngui

对于网络,我通常只使用 native 滚动机制。它们快速、可靠,并且不涉及编码。

但是,当我越来越多地使用 Unity 时,我发现可用的滚动插件,即使是像 Unity.UI 或 NGUI 这样的大插件也很糟糕。我问了一下,发现大部分平台都是这样。物理原理很糟糕。

我做了很多研究,尝试了一些解决方案,从 NGUI scrollView 到 web iScroll.js 等等。我没有找到比原来的 Apple PastryKit 更完美的解决方案。现在,PastryKit 已经过时、已被弃用、没有 API 并且像象形文字一样难以阅读。

重要是,在制作过程中,他们成功地准确地重现了 iOS 动感滚动物理行为。

我并不是想实现 PastryKit ,我只是想了解它是如何工作的。我正在尝试理解和复制。

我正在尝试找出他们使用的缓动/公式以及他们使用它们的逻辑条件。Apple 有一种疯狂的方式来编写令人困惑的 JS,所以即使我是一名全栈开发人员,我很难追踪所有事情。我认为没有人比一个人更好,所以让我们看看,有人理解这个文件吗? :D

https://github.com/jimeh/PastryKit/blob/master/mobile/dist/PastryKit.js

简而言之(所以没有误解):我试图从这个文件中提取一组物理规则,我可以将其用作指导方针,以便编写我自己的滚动实现我选择的任何平台。 :)

例如:“正常”滚动由{>300ms && >10px}定义,苹果在缓和减速动画时使用以下贝塞尔曲线。 cubic-bezier.com/#.25,.46,.1,.94

更新:我们不久前解决了这个问题。我们发现了苹果公司是如何实现这一势头的。 https://medium.com/homullus/recreating-native-ios-scroll-and-momentum-2906d0d711ad

最佳答案

经过几个小时的剖析该算法后,我们得出结论:苹果实际上正在使用魔数(Magic Number)。神奇的数字是:(鼓声)动量 * 0.95。

基本上,当触摸持续时,苹果会让你以 1:1 的比例移动屏幕。

在触摸端,苹果将通过用户滑动的像素数和用户滑动的时间来获得动力。如果像素数小于10或时间小于0.5,动量将被钳制为零。

无论如何,一旦我们知道了动量(速度),他们就会在每一帧中将其乘以 0.95,然后将屏幕移动相应的量。

如此愚蠢的简单和优雅,以至于让人心痛。 :)

关于javascript - 需要帮助剖析和重新创建基于 PastryKit 的完美滚动缓动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38619717/

相关文章:

javascript - data-api 中的 Bootgrid ajax 设置

unity-game-engine - 将角色从屏幕的边缘传送到屏幕的边缘

html - 防止居中布局在出现滚动条时移动其位置

c# - 嵌套列表框滚动问题

javascript - 动态创建的元素上的事件绑定(bind)?

javascript - 将 jquery 选择器转换为数组

unity-game-engine - 我可以使用 Unity 3D 导航网格进行第一人称导航吗?

c# - Unity WebGL WebSocket 消息头

javascript - 当用户滚动到特定元素时触发事件 - 使用 jQuery

javascript - 带有动态列的 Angular 过滤表 ng-model 未设置