javascript中的简单缓动功能

Question

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

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

我想要的是，缩放在前 60-80% 时缓慢开始，然后显着增加。

对我来说，我似乎需要某种反指数或对数函数来做到这一点，但我无法确切地弄清楚如何实现这一点。理想情况下，该函数将返回0.0forx = threshold和1.0for x = 0（其中 x 将是元素的当前位置/百分比）。

任何帮助表示赞赏。我认为这可能是微不足道的，但我无法理解它。

Answer 1

这里有两个你可以尝试：

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

1 - x^2

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

Answer 2

干得好：

function easeInOutQuad(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
}

在哪里

这一切都由这个伟大的缓动方程列表提供： http://gizma.com/easing/