计算淡入淡出动画不同速度的公式答案

【问题标题】：Equation to calculate different speeds for fade animation计算淡入淡出动画不同速度的公式
【发布时间】：2010-11-01 23:47:43
【问题描述】：

我正在尝试通过手动更改表单的不透明度来为我的表单添加淡入淡出效果，但我在计算要按表单的不透明度值递增的正确值时遇到了一些问题。

我知道我可以使用 AnimateWindow API，但它显示了一些意外行为，我宁愿手动执行它以避免任何 p/invoke，以便稍后在 Mono 中使用它。

我的应用程序支持从 1 到 10 的速度。我手动计算出，对于 1（最慢）的速度，我应该将不透明度增加 0.005，对于 10（最快）的速度，我应该增加 0.1。至于 1 到 10 之间的速度，我用下面的表达式来计算正确的值：

double opSpeed = (((0.1 - 0.005) * (10 - X)) / (1 - 10)) + 0.1; // X = [1, 10]

虽然这可以给我一个线性值，但那没关系。但是，对于 X 等于 4 及以上，它已经太快了。超过它应该的。我的意思是，速度在 7 和 10 之间，我几乎看不出有什么区别，并且这些值的动画速度应该间隔更大一些

请注意，我仍然希望最快的增量为 0.1，最慢的增量为 0.005。但我需要所有其他人在它们之间保持线性。

我做错了什么？

实际上它为什么这样工作是有道理的，例如，对于增量之间的固定间隔，比如几毫秒，并且根据上面的等式，如果 X = 10，那么 opSpeed = 0.1，如果 X = 5，那么运算速度 = 0.47。如果我们考虑一下，0.1 的值将循环 10 次，而 0.47 的值将只循环双倍。对于只有几毫秒的如此小的间隔，这些值之间的差异并不像区分 5 到 10 的速度那么大。

【问题讨论】：

标签： performance function animation math

【解决方案1】：

我想你想要的是：

0.005 + ((0.1-0.005)/9)*(X-1)

对于 X 范围为 1-10

这给出了一个线性刻度，当 X = 1 时对应于 0.005，当 X = 10 时对应于 0.1

在下面的 cmets 之后，我还包括适合几何系列而不是线性比例的答案。

0.005 * (20^((X-1)/9)))

导致几何变化对应于 X = 1 时的 0.005 和 X = 10 时的 0.1

经过更多讨论，如下面的 cmets 所示，更新如下。

@Nazgulled 发现我的几何系列和他实际需要的手动值之间存在以下关系，以确保平滑的淡入淡出动画。

关系如下：

这意味着几何/指数级数是要走的路。

经过我数小时试图提出与右侧图拟合的适当曲线并推导出适当的方程后，@Nazgulled 告诉我 Wolfram|Alpha 就是这样做的。真的很神奇。 :)

Wolfram Alpha link

他现在应该得到他想要的，除非上面的公式有很大的错误。

【讨论】：

我刚试过，同样的问题发生了。我几乎看不到 6 和 10 之间的速度差异。我认为问题是线性比例，它对不透明动画效果不太好。
你可以尝试一些有创意的东西，也许是递减的几何级数？
你能算出一个大约 5 左右的中间值吗，这将有助于找到某种非线性尺度。
一个非常疯狂的想法，但你想试试这个吗？ 0.005 * (pow(20,1/9)^(X-1)) 几何变化对应于 X = 1 时的 0.005 和 X = 10 时的 0.1
不应该有两个 pow() 吗？如果是这样，它总是导致 0.005。不管怎样，我已经更新了我的第一篇文章。

【解决方案2】：

您的问题源于人眼的反应不是线性的；准确地说，眼睛不会将 0.05 到 0.10 的光度差异与 0.80 和 0.85 之间的光度差异相同。整个话题很复杂；您可能需要搜索短语“伽马校正”以获取更多信息。一般来说，您可能希望找到一个能有效“校正”人类眼部反应的方程，并将其用作您的衰减函数。

【讨论】：

也许他应该在设置之前将 log 应用于 opacity 值？
我承认人眼可能会在这方面发挥作用，但我认为问题不在于那里。虽然 0.05 到 0.10 的亮度可能与 0.80 到 0.85 之间的亮度不同，但我看不出这与我的问题有什么关系。在线性方程中，当 X = 6（例如）时的不透明度增量值已经太高（对于我想要的），并且动画将在达到 1.0 之前循环几次。这是有道理的，它与光度无关。我认为这个等式 (tinyurl.com/lnmeuk) 可能会解决我的问题，我将不得不再次检查它。

【解决方案3】：

这并不是一个真正的答案，但我只想指出，到目前为止发布的每个人，包括最初的问题，都发布了相同的等式。所以有四个独立的推导，也许我们应该假设这个方程可能是正确的。

我做了代数，但这是要验证的代码（在 Python 中，顺便说一句，添加了偏移以分隔曲线：

from pylab import *

X = arange(1, 10, .1)

opSpeed0 = (((0.1 - 0.005) * (10 - X)) / (1 - 10)) + 0.1   # original
opSpeed1 = 0.005 + ((0.1-0.005)/9)*(X-1)     # Suvesh
opSpeed2 = 0.005*((10-X)/9.) + 0.1*(X-1)/9.  # duffymo

a = (0.1 - 0.005) / 9 #= 0.010555555555...    # Roger
b = 0.005 - a        #= -0.00555555555...
opSpeed3 = a*X+b

nonlinear01 = 0.005*2**((2*(-1 + X))/9.)*5**((-1 + X)/9.)


plot(X, opSpeed0)
plot(X, opSpeed1+.001)
plot(X, opSpeed2+.002)
plot(X, opSpeed3+.003)
plot(X, nonlinear01)
show()

另外，应 Nazgulled 的要求，我已经包含了 Suvesh 建议的非线性曲线（顺便说一句，它看起来很像 McWafflestix 建议的伽马校正曲线）。 Suvesh 的非线性方程在代码中为nonlinear01。

【讨论】：

做得很好。我没有检查他；我认为这是一个简单的代数错误。我想采取不同的方法，以防万一会暴露错误。但你的看法是正确的，非常有帮助。
对 python 的使用也很好。对于这样的问题，我需要考虑更多。
谢谢。我发现 Python 非常适合这种类型的事情。它在处理小问题时既快速又简单，但对于大问题却能很好地扩展。
谢谢您，您能否编辑该图表并将此等式 (tinyurl.com/lnmeuk) 发布在上面？
@Nazgulled - 我已经添加了您要求的曲线。不过，更好的是让 Suvesh 编辑他对非线性版本的响应并将曲线发布到那里。

【解决方案4】：

以下是我对线性关系的编程方式。但首先我想澄清一下我认为你在做什么。

您希望不透明度的变化率是速度的线性函数：

o(v) = o1*N1(v) + o2*N2(v) 使得 0

如果我们选择 N1(v) 等于 1-v 并且 N2(v) = v 我们最终得到你想要的：

o(v) = o1*(1-v) + o2*v

所以，插入你的价值观：

v = (u-1)/(10-1) = (u-1)/9

o1 = 0.005 和 o2 = 0.1

所以函数应该是这样的：

o(u) = 0.005*{1-(u-1)/9} + 0.1*(u-1)/9
o(u) = 0.005*{(9-u+1)/9} + 0.1*(u-1)/9
o(u) = 0.005*{(10-u)/9} + 0.1(u-1)/9

你可以简化这个直到你得到一个简单的 o(u) 公式，其中 1

【讨论】：

是的，对于像我这样数学很笨的人来说有点复杂：P
不是真的，它们只是简单的线性形状函数和一点代数。什么这么难？ 8)
我没有得到它并得到所有其他答案已经够难了，哈哈......但没关系，解决方案不是线性方程。

【解决方案5】：

如果我了解您的需求，您需要通过平面中这两个点的直线方程：(1, 0.005) 和 (10, 0.1)。这种线的一般方程（只要它不是垂直的）是 y = ax+b。将两点代入该方程，求解所得的两个线性方程组，得到

 a = (0.1 - 0.005) / 9 = 0.010555555555...
 b = 0.005 - a        = -0.00555555555...

然后，对于每个整数 x = 1, 2, 3, ..., 10，将 x 代入 y = ax+b 以计算 y，即您想要的值。

【讨论】：