將CSS cubic bezier easing轉換為Javascript

Question

我正在尋找一種為我的補間生成緩動函數的方法，我需要它們的Javascript函數格式，標准的t, b, c, d參數。

我找到了一個很好的工具來生成CSS緩存： http ： //cubic-bezier.com/但輸出對我來說沒用。

• 有沒有辦法將此格式轉換為Javascript緩動函數？
• 有沒有更好的工具來直接構建Javascript緩動函數？

---

所需的格式如下：

function(t, b, c, d){
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b+c*(4.257575757575761*tc*ts + -7.9545454545454595*ts*ts + 0.6818181818181834*tc + 4.46969696969697*ts + -0.4545454545454546*t);
}

Answer 1

在JavaScript中有基於Bezier Curve緩存的庫https://github.com/gre/bezier-easing

您可以從http://cubic-bezier.com中選擇所需的參數，並將它們傳遞給BezierEasing函數。 例如：

BezierEasing(0.25, 0.1, 0.0, 1.0)

以下是文檔中的示例：

https://jsfiddle.net/0x51ew2L/

Answer 2

像這樣：

element = document.getElementById('targetElement');
element.style.transitionTimingFunction = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';