Question

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

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

我想要的是，缩放比例在前60-80％左右缓慢开始，然后大幅提升。

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

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

Answer 1

这是你可以尝试的两个：

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

Plot on Wolfram Alpha

1 - x^2

Plot on 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

反复发表评论，您可以像这样使用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 4

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

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中的简单缓动功能

5 个答案: