javascript - javascript中的简单缓动函数

Question

我无法解决这个简单的数学问题。我花了两个多小时在 SO 和 Google 上阅读了各种相关答案，但我的高中数学知识似乎消失了。

在页面上我有一个元素，一旦它超过阈值，它就会缩小，越接近包含元素的边缘。现在，它以线性方式扩展。我计算到容器边缘的距离，将其与阈值(缩放比例为 100%)进行比较，并从中计算出用于实际缩放的百分比元素(通过 CSS 转换)。

我想要的是，缩放在最初的 60-80% 中缓慢开始，然后大幅增加。

对我来说，我似乎需要某种反指数函数或对数函数来执行此操作，但我无法弄清楚如何实现它。理想情况下，函数将为 x = threshold 返回 0.0，为 x = 0 返回 1.0(其中 x 为元素的当前位置/百分比)。

感谢任何帮助。我认为这可能微不足道，但我无法全神贯注。

Answer 1

这里有两个你可以试试:

(cos(pi*x) + 1) / 2

Plot on Wolfram Alpha

1 - x^2

Plot on Wolfram Alpha

取决于您是希望它们在阈值处缓和还是陡峭。这些被归一化为 (0,1)，但您可以通过将 x 除以您的阈值轻松地将它们缩放到任何间隔。