javascript 中的简单缓动函数

Question

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

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

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

对我来说，我似乎需要某种反指数函数或对数函数来执行此操作，但我无法弄清楚如何实现它。理想情况下，该函数将 return 0.0 用于 x = threshold 和 1.0 用于 x = 0 （其中 x 将是元素的当前 position/percentage）。

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

Answer 1

这里有两个你可以试试：

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

Plot on Wolfram Alpha

1 - x^2

Plot on Wolfram Alpha

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

Answer 2

拒绝我的评论，您可以像这样使用 jQuery 的 animate()（示例已提取 from the doc）

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

List of all easing functions.

Answer 3

给你：

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 4

如果你想要一个超级简单的 ease-in-out cubic，我认为这个可以胜任

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 5

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

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

javascript 中的简单缓动函数

Simple easing function in javascript

javascript

math

easing