0

我有动画遵循这个计时函数：cubic-bezier(0.25, 0.1, 0.25, 1.0)

我想修改这个函数，所以我只得到它的结尾 40%。为了让事情变得简单，让我们说我想要函数的 50%。我怎样才能做到这一点。

所以图形上就是这样： https ://developer.mozilla.org/files/3429/cubic-bezier,ease.png

我想用参数制作一个三次贝塞尔曲线，以便在图形上我们只能看到顶部，所以我们从该图的 0.5 到 1（在 yaxist 上）部分看到的，我想制作同一条线，但从 0为 1。

请帮助我如何制作此功能。

4

1 回答 1

3

如果您只需t要从 0 到 1 的三次曲线的一部分，则可以使用“简单”的公式来确定新坐标需要是什么。我说简单是因为它很容易实现，但是如果您还想知道为什么实现实际有效，那通常需要深入研究数学，有些人认为这很可怕。

（矩阵分割部分的最终结果几乎为您提供了任意分割点的新坐标，而无需阅读其工作原理的解释）

让我们以曲线为例：首先，我们需要弄清楚曲线的原始坐标是什么。我们猜测 (0,0)-(0.4,0.25)-(0.2,1)-(1,1)。然后我们想要在 处分割该曲线t=0.4，因此我们忽略了第 7 节的所有内容，除了告诉我们如何推导新坐标的最后一位。对于任何分裂点t=z（其中 z 介于 0 和 1 之间），我们将有两组新坐标。一组用于分割点“之前”的曲线，另一组用于分割点“之后”的曲线。我们想要后者，所以我们选择：

分割后曲线的坐标推导

所以我们只需插入 0.4z就可以了。我们新的第一点是0.064 * P4 - 3 * 0.096 * P3 + 3 * 0.144 * P2 + 0.216 * P1 = 0.2944（我们需要评估两次。一次用于我们的 x 值，一次用于我们的 y 值）。我们对 P2、P3 和 P4 做同样的事情（尽管我们的第四点当然仍然是相同的，所以我们不需要打扰。它是 (1,1)，拆分后仍然是 (1,1)）。

所以，让我们在 javascript 中实现它：

function split(options) {

  var z = options.z,
      cz = z-1,
      z2 = z*z,
      cz2 = cz*cz,
      z3 = z2*z,
      cz3 = cz2*cz,
      x = options.x,
      y = options.y;

  var left = [
    x[0],
    y[0],
    z*x[1] - cz*x[0], 
    z*y[1] - cz*y[0], 
    z2*x[2] - 2*z*cz*x[1] + cz2*x[0],
    z2*y[2] - 2*z*cz*y[1] + cz2*y[0],
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0]];

  var right = [
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0],
                    z2*x[3] - 2*z*cz*x[2] + cz2*x[1],
                    z2*y[3] - 2*z*cz*y[2] + cz2*y[1],
                                    z*x[3] - cz*x[2], 
                                    z*y[3] - cz*y[2], 
                                                x[3],
                                                y[3]];
  return { left: left, right: right};
}

木已成舟。此函数将为我们提供两条子曲线（称为left和right，两个 Number[8] 数组都以 x1/y1/x2/y2/... 排序）如果放在一起，则在数学上与我们的原始曲线相同，除了建模为两个新t=[0,1]区间，对于 z 在 0 和 1 之间的任何分裂点t=z。我们的工作永远完成。

于 2014-05-04T04:25:55.367 回答