javascript中的简单缓动功能

Question

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

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

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

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

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

Answer 1

这里有两个你可以尝试：

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

在 Wolfram Alpha 上绘图

1 - x^2

在 Wolfram Alpha 上绘图

取决于您是希望它们放松还是在阈值处陡峭。 这些被归一化为 (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;
};

在哪里

• t是当前时间
• b是起始值
• c是价值的变化
• d是持续时间

这一切都来自这个很棒的缓动方程列表： http : //gizma.com/easing/

Answer 3

如果你想要一个超级简单的缓入出立方体，我认为这个就可以了

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

它基本上使用x^3从 0 到 0.5 的鞍点，然后采用另一条 x^3 曲线并将其转换为终点。 t需要在域[0,1]

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

Answer 4

下面你会看到这个用 TypeScript 编写的缓动函数的代码。

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

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

所有缓动函数的列表。