将CSS的cubic bezier缓动函数转换为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);
}

- Drahcir

Answer 1

JavaScript有一种基于Bezier曲线缓动的库，可以在https://github.com/gre/bezier-easing找到。

您可以从http://cubic-bezier.com选择所需参数，然后将它们传递给BezierEasing函数。例如：

BezierEasing(0.25, 0.1, 0.0, 1.0)

以下是来自文档的示例：

https://jsfiddle.net/0x51ew2L/

- Nikita. A.

---

感谢重写。当他们使其特定（针对节点）时，总是很糟糕。但是它不能处理负值，不过我想我可以在之后进行转换。 - mjs

这个有 CDN 吗？ - PauAI

Answer 2

就像这样：

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

- Caleb

---

这并不回答原问题，即如何将 CSS 的 cubic-bezier 缓动函数转换为 JavaScript，而且不使用 CSS cubic-bezier。 - Binary