javascript - 创建简单功能 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 之间)，我们将获得两组新坐标。一组用于分割点“之前”的曲线，一组用于“分割点之后”的曲线。 " split 点。我们想要后者，所以我们选择:

所以我们只需为 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] 数组)，它们在数学上是如果放在一起，与我们的原始曲线相同，但对于任何 split 点 t=z，建模为两个新的 t=[0,1] 区间> z 介于 0 和 1 之间。我们的工作永远完成。