滚动位移超调 - 数学问题

所以我想做的是,使用动力学模型创建一个漂亮的滚动条。问题在于过冲时的阻尼。我想展示的行为是,当你超过最大/最小值时,它会阻尼位置。

我想要的具体行为是这样的:假设,最大超限是50像素。这里是一个表,表示我想要它的工作方式。(这是我能想到的最好的方式)。

位移|位置|百分比
位置的|展示@|超限
------------------------------------------------ -
25|12.5|50100|25|100200|37.5|200400|43.75|400%
…...…...……...............

注意:小数显然会向下舍入,以便我们可以实际显示它。

我很确定我可以递归地计算这个问题(但我不想这样做)。我认为数学关系相当明显,尽管我不确定如何做到这一点。我甚至可能是以错误的方式思考这个问题,所以请考虑忽略我的表格。重要的是,用户无法将窗口移动到超过max超限值的位置(在这种情况下,50像素)。

这里是运行定位设置的代码片段...

function KineticModel:SetPosition(NewPosition)
--设置动力学模型的位置。使用此方法,它将计算速度。

    local CurrentTime = tick()
    local ElapsedTime = CurrentTime - self.TimeStamp
    local LocalVelocity = ((self.Position - self.LastPosition) * 5) / ElapsedTime

    TimeStamp = CurrentTime
    self:SetVelocity((0.2 * self.Velocity) + (0.8 * LocalVelocity))--保留20%的前一个速度,使用80%的新速度。

    if NewPosition> self.Maximum then
        print(“[KineticModel] - Past Max Manual")
        local Displacement = math.abs(NewPosition- self.Maximum)
        --抑制位置,以防无法超过它。

        self.Position= self.Maximum+(Displacement / self.MaxBounce)--这行代码不起作用。:(
    elseif NewPosition< self.Minimum
        print(“[KineticModel] - Past Min Manual"local Displacement = math.abs(NewPosition- self.Minimum)
        --相同的位移
    否则
        self.Position= NewPosition
    end

    self.LastPosition = self.Position
    self.OnPositionChange(self.Position)
    print(“[KineticModel] - Set Velocity@“..self.Velocity..”; Local Velocity @ “…LocalVelocity)

end

主要问题是尝试找到数学方法来找到应该显示它的位移。我将实现这个位移,以基本过滤在每个点之前的位置,因此如果存在潜在问题,请告诉我。

谢谢。:D

编辑:标题,标签

点赞
用户1468366
用户1468366

这个答案忽略了速度和阻尼等所有动态方面。我将集中于将可能任意大的超调值转换为具有有限最大值的位移值。

一个简单公式

一个简单的公式,具有您所要求的属性,如下: 让 x ≥ 0 为超调, 0 ≤ y ≤ 50 为最终位移。然后,您可以使用以下公式将它们相关联:

y = 50*x/(x + 75)

分数 x/(x+75) 将在大的 x 下任意接近 1,但永远不会达到它,因此您的位移永远不会超过 50。您可以在公式中调整 75,以控制它收敛的速度。对于 75,您将得到:

 x    y
 25  12.5
 50  20.0
100  28.6
200  36.4
400  42.1

更多灵活性

要进一步控制曲线的形状,可以使用一个包含 x 的多项式的不同公式在分子和分母中。但只有在您对曲线通过特定点或其他简单方法的要求非常严格时,才会这样做。

匹配速度

这个简单的公式可能会导致内容移动的突然停顿,因为其速度很可能不与未超调的文档的速度相匹配。为了匹配速度,您可以使用一个自由度来控制斜率。最简单的方法是使用相同的输入和输出单位,例如像素。然后,您将在原点处瞄准斜率为 1。

y = 50*x(x + 50) = x/(x/50 + 1)

这将给出以下值:

 x    y
 25  16.7
 50  25.0
100  33.3
200  40.0
400  44.4

对比图

以下是我提到的两个函数的绘图,连同您表格中的数据点。虽然不是完全匹配,但应该是相当接近的。请注意,在您表格的第一行中,我不确定要选择哪个列作为 x 值,因此现在对于 y=12.5,有两个数据点。

函数图的绘图

2013-05-10 09:54:16