javascript - 将分割三次贝塞尔曲线外推到1,1

我需要此处提供的解决方案的帮助。

Create easy function 40% off set

我需要对其进行修改，以便在拆分后将返回的左和权利外推到1,1。这是因为如果不进行推断，就无法将返回的拆分三次贝塞尔曲线用作css过渡。

这就是我所做的测试。请提供帮助，因为real与mike方式不匹配:(我认为问题是我需要将结果推断为1,1。尽管我很确定，但我不能简单地将值加倍。


真实


ease-in-out是cubic-bezier(.42,0,.58,1)，图形上是http://cubic-bezier.com/#.42,0,.58,1
前半部分是ease-in，它是cubic-bezier(.42,0,1,1)，图形上是http://cubic-bezier.com/#.42,0,1,1
一半是ease-out，是cubic-bezier(0,0,.58,1)，一般是http://cubic-bezier.com/#0,0,.58,1

上面发布的函数返回以下内容


ease-in-out与此相同
左上半部分为cubic-bezier(0.21, 0, 0.355, 0.25)，图形上为http://cubic-bezier.com/#.21,0,.35,.25


返回的代码：left:[0, 0, 0.21, 0, 0.355, 0.25, 0.5, 0.5]

下半部分，对，给定为cubic-bezier(0.645, 0.75, 0.79, 1)，图形上为http://cubic-bezier.com/#.64,.75,.79,1


返回的代码right:[0.5, 0.5, 0.645, 0.75, 0.79, 1, 1, 1]




用于获得Mike方式的代码是这样的：

var result = split({
    z: .5,
    x: [0, 0.42, 0.58, 1],
    y: [0, 0, 1, 1]
});
alert(result.toSource());

最佳答案

前半部分为缓入，其为三次贝塞尔（.42,0,1,1），图形为http://cubic-bezier.com/#.42,0,1,1


请验证此假设。 （css timing function中的曲线原始端点为0,0和1,1）
贝塞尔曲线[0,0，.42,0，.58,1，1,1]的前半部分不应为[0,0 .42,0，1,1，1,1]
端点是正确的（缩放到1,1后），但是您在那里失去了连续性。

Mike的算法返回的值正确。

Try this visualisation解释为什么您的假设可能是错误的。

您用于拆分的算法是一种众所周知的算法，称为de Casteljau算法。该方法可以以非常简单的方式在几何上表达。查看有关如何在任意点进行拆分的动画效果图https://en.wikipedia.org/wiki/B%C3%A9zier_curve。

但是，您可能很快会遇到一个问题，尝试正确缩放贝塞尔曲线的拆分部分以适合单位正方形，端点固定为0,0和1,1。这可能可以很容易地在纸上尝试。最简单的方法可能是线性缩放贝塞尔曲线的控制点，但是在大多数情况下，您会得到一条压缩曲线。