将 CSS 三次贝塞尔缓动转换为 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 https://github.com/gre/bezier-easing

中有基于贝塞尔曲线的缓动库

您可以 select 想要的参数来自 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)';

将 CSS 三次贝塞尔缓动转换为 Javascript

Convert CSS cubic bezier easing to Javascript

javascript

tween

easing