如何制作流畅的滚动动画？

Posted 2023-02-16

【中文标题】如何制作流畅的滚动动画？

【英文标题】：How do I make a smooth scrolling animation?

【发布时间】：2013-04-19 14:47:51

【问题描述】：

我有一个CListCtrl，它有大约 100,000 多个条目。向用户呈现一个搜索框以在这些条目中进行搜索。在找到匹配项时，我将其设置为选择并使用 EnsureVisible 滚动到它。

这个滚动是瞬间发生的。我想尝试编写一个类似于ones demoed here 的动画（尤其是“Go Top - Easing 2”动画）。

我在想，对于一个基本的动画，

获取当前选择。 获取目标选择。 计算差异。 获取一项的像素高度。 将第 3 步和第 4 步的结果相乘。 Scroll 增量为 1（或其他更优值），并延迟直到增量 = 步骤 5 的结果。

我试过这个，我非常困惑。首先，我的算法好吗？其次，是否有另一种更好的方法来实现这一点（最好类似于link above中的动画2）？

【参考方案1】：

对于简单的线性滚动，您的算法似乎没问题。但是，您的链接使用各种缓动功能指向滚动。

缓动函数每次滚动的量并不相同，但增加或减少是为了让它们看起来像是在加速或减速。

计算缓动值的常用方法是使用正弦的结果。如果您描绘一个正弦波，并想象一次只能看到一个像素，那么随着波的前进，该像素将在极端处“缓和”并通过中间值加速。

您的 Easing 2 动画只是在开始和结束时添加了一点反弹，这很容易通过在两端使用一点正弦波来实现。例如。

     _
    / \
   /
\_/

如果你想要一些代码，我在 C# 中回答了一个类似的问题here。

【讨论】：

其实我的算法根本不行哈哈！但是，是的。我猜这让我更接近我想要的。我会试试这个然后回来。谢谢你的回答！