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

所有緩動函數的列表。