Smoothstep积分

在执行无状态动画时，我们必须以某种方式描述作为时间的函数的场景中对象的最终位置和方向，而不是模拟过程的结果。这意味着速度和加速度的概念不是明确给出要计算的位置的，但它们是相当隐含的，并且我们设计的位置函数的结果。所以，有时它可以难以设计一种产生我们所希望的速度的位置函数。左，动画不正确。对，正确的动画。一种这样的情况是在恒定速度的运动之间产生平稳过渡。我们确实知道SmoothStep（）函数，也知道有时作为Easeinout（），是平滑地插入状态的方便方式。因此，自然地想象SmoothStep（）可能需要参与这种动画的设计。然而，人们必须要小心和顺利进行正确的数量，这对某些人来说是不明显的。所以，让＆＃39; s看起来一看：我们动画函数的设计的一种方法是注意到我们想要的是在两个速度之间平稳地插值 - 从我们动画开始到恒定速度的速度。不损失一般性，假设我们希望速度为每秒1个单位的速度，并且我们希望在静止和恒定速度状态之间的过渡到持续的T秒。基本上，这实际上很棒。问题是如何基于此速度为我们的对象产生一个位置。一个人可能会天真地尝试乘以速度，以便获得位置，如下所示：这不起作用 - 当在我们的场景中使用时，我们想要放入运动的对象似乎快速加速，然后非常突然地迅速且非常突然突然加快在以恒定速度沉降之前减速。在文章顶部的视频中，在左侧，您可以看到蝴蝶的翅膀是如何进行运动的，似乎在开始以常规时尚的翻盖之前减慢。当然，它感觉不像是Smoothstep，显然我们的直觉在这里失败了。绘制实际位置（）函数随着时间的推移实际上揭示了一些事情真的错了，实际上，我们的位置曲线的斜率比45度，或1，这是我们的目标速度：所以错误，为什么我们得到一个平滑的动画。嗯，问题是我们认为位置是速度乘以时间，并且仅适用于恒定速度。通常，位置是速度的积分。因此，为了获得我们的位置函数，我们需要整合SmoothStep。值得庆幸的是，由于SpandleStep是一个简单的立方体功能，集成了它非常简单：这只是一个划分（如果T未提前知道）和几个乘法和添加，并直接转换为浮动位置（浮动T，IN float t）{if（t＆gt; = t）返回t - 0.5 * t; float f = t / t;返回f * f * f *（t-t * 0.5）;}

这个函数的图表现在在下面的图片中，表明了一个美丽的过渡，斜率平滑地从零到一个没有过冲：确实，当我们使用它来动画蝴蝶的翅膀动画时显示在文章顶部的视频的右半部分，动画是平滑的，只是完美。您有一个蝴蝶的拼写示例，错误且在shadeertoy中正确的位置函数：https://www.shadertoy.com/view/sdbswc。此外，我经常使用此功能，以至于我已将其添加到我收集有用的小功能。最后，我创造了这篇文章的1分钟视频摘要。