JavaScript中的简单缓动函数

Question

我在解决一个简单的数学问题时遇到了困难。我花了两个多小时阅读了 SO 和 Google 上各种相关答案，但似乎我的高中数学知识已经不够用了。

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

我希望缩放在前60-80%的范围内缓慢开始，然后迅速加速。

对我来说，似乎需要某种反指数或对数函数来实现这一点，但我无法确定如何实现。理想情况下，该函数应返回x = 阈值时的0.0和x = 0时的1.0（其中 x 将是元素的当前位置/百分比）。

感谢任何帮助。我认为这可能很简单，但我无法理解它。

- oelna

---

你能使用一个库吗？jQuery有一个“animate”函数，可以指定你想要的插值类型。 - Cyril Duchon-Doris

理论上是可以的，但我认为这不可行。计算发生在拖动事件内，并且随着每次鼠标移动而刷新。这就是为什么我用更抽象的数学方式来表达问题的原因。 - oelna

你有没有检查过jQuery UI的可拖动组件？ - Cyril Duchon-Doris

Answer 1

这里有两个你可以尝试的：

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

在Wolfram Alpha上绘制图形

1 - x^2

在 Wolfram Alpha 上绘制

根据您想让它们在阈值处变得平稳或陡峭。它们被标准化为（0,1），但是通过将 x 除以阈值，您可以轻松地将它们缩放到任何间隔。

- cfh

---

这些很棒！特别是第一个看起来非常不错。 - oelna

Math.sin(Math.PI * x) 对我来说效果最好。 - danday74

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;
}

作用：

• t 表示当前时间
• b 表示起始值
• c 表示变化量
• d 表示持续时间

所有这些参数都由这个出色的缓动方程列表提供： http://gizma.com/easing/

- Emil Ingerslev

---

请使用实际变量，而不是添加键。 - mikemaccana

Answer 3

如果你希望得到一个超级简单的缓入缓出三次方函数，我认为这个可以胜任。

function easeInOut(t){
  return t > 0.5 ? 4*Math.pow((t-1),3)+1 : 4*Math.pow(t,3);
}

它基本上利用了从0到0.5的x^3中的鞍点，然后取另一个x^3曲线并将其平移为结尾。t需要在域[0,1]中。

http://plnkr.co/edit/QiY8RR9KPCvoA8ZXVtPY?p=preview

- user1506145

Answer 4

以下是用TypeScript编写的缓动函数代码。

function easeInOutQuad(x: number): number {
      return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;
    }

- Ismail Sadok

---

嘿，伙计。你能给我展示一下如何使用它吗？X是什么？ - Thắng

Answer 5

弹跳我的评论，你可以像这样使用jQuery的animate()（示例从文档中提取）。

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});

所有缓动函数列表。

- Cyril Duchon-Doris