为什么在给定线性三次贝塞尔曲线时 p5.js bezierPoint() function 返回非线性值？

Question

好的，所以我一直在创建一个 UI 框架，并在其中添加了动画。 我想让用户使用cubicBeziers来控制动画的计时功能，所以我决定使用p5.js的bezierPoint() function。 我花了几个小时让它工作，最后让它以我认为完美的方式工作......直到现在我发现它（不知何故）没有按预期工作。

当我传入一个开始/结束点在0,1和1,0并且控制点在0.5,0.5和0.5,0.5的三次贝塞尔曲线（这是一个线性三次贝塞尔曲线）时，我会无缘无故地得到一个缓和的 animation 。 . 这应该产生一个线性 animation （可以在这里演示），但不知何故它不是。

所以我进一步研究它只是为了证明我不只是看到事物，果然，它实际上给出了非线性数字。 我写了这个小代码片段：

 <script src = "https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.min.js"></script> <script> function setup(){ createCanvas(100,100); } function draw(){ background(255,255,0); noFill(); stroke(0,0,0); strokeWeight(3); bezier(0,100,50,50,50,50,100,0); ellipse(bezierPoint(0,50,50,100,frameCount / 100),bezierPoint(100,50,50,0,frameCount / 100),5,5); ellipse(50,bezierPoint(100,50,50,0,frameCount / 100),5,5); ellipse(60,100 - frameCount,5,5); } </script>

您可以非常清楚地看到，与线性点（右侧的点）相比， bezierPoint()后面的点（左侧的点）以非线性速度移动

为什么会这样？

---

只是想为了方便起见，我会把它包括在这里。 这是 p5.js 的bezierPoint() function：

function bezierPoint(e,t,r,i,n){
    var a = 1 - n;
    return(Math.pow(a,3) * e + 3 * Math.pow(a,2) * n * t + 3 * a * Math.pow(n,2) * r + Math.pow(n,3) * i);
}

Answer 1

好的，所以在继续研究之后，这似乎是某种预期的行为。

我发现了这个问题： Custom animation usingcubic Bezier function

其中指出“我在一个问题上看到 [that] 回答者建议简单地消除 x 并将 function 定义为 y 对 t。但是，这将给出非常不准确的结果，因为从 0.0 到 1.0 的线性贝塞尔曲线不会线性动画。”

这让我知道我在这里看到的是某种预期的行为......我只是无法将我的大脑包裹在它周围。

采用线性曲线和动画值t如何线性地给出非线性结果？，我的代码中没有任何非线性的东西。 但不知何故，我得到了一个非线性 animation，这对我来说真的没有意义。 但是现在我知道这是预期的行为，我想我可以期望不会收到我正在寻找的答案。

Answer 2

当三次贝塞尔曲线的 4 个控制极点共线时，贝塞尔曲线确实看起来“线性”。 但这并不意味着这条贝塞尔曲线与从 P0 到 P3 的直线完全相同。 直线的一阶导数是常数，但线性贝塞尔曲线的一阶导数不是常数（通常）。

要获得“真正的”线性三次贝塞尔曲线，您需要将两个中间控制点 P1 和 P2 放置在

P1 = P0 + (P3-P0)/3
P2 = P0 + 2*(P3-P0)/3