创建简单的功能 40% 折扣

Question

我有动画遵循这个计时函数：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。

请帮我如何实现这个功能。

Answer 1

如果您只需要三次曲线的一部分，t 从 0 到 1，则有 "simple" 公式来确定新坐标需要是什么。我之所以说简单，是因为它实现起来非常简单，但如果你还想知道实现的真正原因，那通常需要深入研究数学，有些人认为这很可怕。

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

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

所以我们只需为 z 插入 0.4 即可。我们新的第一点是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)）。

那么，让我们implement that in 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，都是 x1/y1/x2/y2/... 排序中的 Number[8] 数组），它们在数学上与我们的 相同如果将原始曲线放在一起，除了建模为两个新的 t=[0,1] 区间外，对于 z 介于 0 和 1 之间的任何分裂点 t=z。我们的工作永远完成。