实现动态滚动的算法

Question

什么是用于创建动态滚动实现的好算法？该功能将在自定义UI列表上进行测试.虽然我的目标是移动设备(那些没有内置此功能的设备),但是来自不同编程领域的任何算法或代码示例也可能适用.

Answer 1

我最近自己实施了一个.这些是我采取的步骤.

1. 你需要测量光标的速度(鼠标光标或手指)
2. 实现一个简单的粒子物理循环.有关如何执行此操作的信息,请访问此处
3. 使用从滚动平面的宽度和视口宽度得出的数学给出粒子"边界"
4. 连续地将鼠标速度和粒子速度之间的差异添加到粒子的速度,因此粒子的速度"匹配"鼠标的速度,只要它的移动.
5. 用户抬起手指后立即停止执行步骤4.物理循环负责惯性.
6. 添加您的个人兴趣,例如"保险杠"边距,以及平滑滚动"锚点",这些点在zeno的悖论上运行以计算运动.
7. 我几乎忘记了:从上面得到的坐标,并将其用作滚动平面的位置.

我很快就会开源代码.你多久需要这个？

编辑:更改了链接.对不起,指向稍有错误的页面.edit2:不是吗？无论如何,我链接到的原始页面是当前链接页面上的第一个链接.

Answer 2

由于这是最初被问到的,我已经仔细阅读了pastrykit的源代码,这是一个框架,其中apple完全复制了他们在javascript中的动态滚动.没有粒子物理循环 - 触摸的速度是在手指抬起的确切时刻测量的.从那时起,使用简单的缓动函数对滚动进行动画处理,该函数使用速度作为输入参数.

Answer 3

我刚刚在我的移动GUI框架中添加了一个滚动小部件,所以我想我会在这里分享我的解决方案.

由于这是一个相当复杂的问题,我决定将其划分为较小的独立子任务,如下所示:

1. 基本滚动功能:此任务包括以最简单的方式处理拖动事件,即通过根据拖动距离和方向滚动内容.这是相对简单的实现,唯一棘手的方面是知道何时开始拖动操作与何时将tap事件传递给可滚动区域内的子窗口小部件.

2. 滚动惯性:这个是最具挑战性的.这里的想法是,在用户抬起手指后,滚动应该持续一段时间,减速直到它完全停止.为此,我需要了解滚动速度.遗憾的是,从单个样本计算速度并不准确,因此在用户滚动时,我会在循环缓冲区中记录最后N个运动事件,以及每个事件发生的时间.我发现N = 4可以在iPhone和HP TouchPad上正常工作.当手指抬起时,我可以根据记录的动作计算惯性滚动的近似起始速度.我定义了一个负加速度系数,并使用标准运动公式(见这里)让滚动效果很好.如果滚动位置在仍处于运动状态时到达边界,我只需将速度重置为0以防止其超出范围(接下来将解决突然停止).

3. 灵活的滚动限制:当滚动到达结尾时,我不想进入突然停止,而是希望小部件滚动一些,但提供阻力.为此,我将两端允许的滚动范围扩展了我定义为小部件维度的函数.我发现每端增加一半的宽度或高度都很好.让滚动感觉它提供一些阻力的技巧是当它们超出范围时调整显示的滚动位置.我用的缩减加上这样的减速功能(有一些很好的功能宽松这里).

4. Spring行为:由于现在可以滚动超出有效范围,我需要一种方法将滚动条带回有效位置,如果用户将其置于范围之外.这是通过在卷轴停止在超出范围位置时调整滚动偏移来实现的.我发现调整功能给出了一个漂亮的弹性外观,是将当前位置到所需位置的距离除以常数并将偏移量移动该量.慢动作的常数越大.

5. 滚动条:最后一步是添加叠加滚动条,滚动条在开始滚动时淡入,在结束时淡出.