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

Question

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

Create easy function 40% off set

我需要修改它，以便将返回的左和右推断为 1,1 split 后。这是因为如果我不进行推断，我就无法使用返回的分割三次贝塞尔曲线作为 css 过渡。

这就是我所做的测试。请帮忙，因为 real 与 mike way 不匹配:( 我认为问题是我需要将结果推断为 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]

用于以迈克方式获取它的代码是这样的:

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

Answer 1

first half is ease-in which is cubic-bezier(.42,0,1,1) and graphically is 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 算法。该方法可以以非常简单的方式进行几何表达。查看动画可视化，了解如何在任意点进行 split https://en.wikipedia.org/wiki/B%C3%A9zier_curve .

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