JavaScript:模拟CSS cube-bezier()的函数

时间:2019-11-24 18:40:12

标签: javascript css animation math

我正在制作动画库,并且有一个在计时器运行时从0递增到1(图形中的X轴)的变量。我现在想以类似于CSS函数 cubic-bezier 的方式对函数应用缓动。

enter image description here

我的目标是y值不是线性增加,而是由缓动函数转换。该函数应如下所示:

function cubic-bezier(x, p0x, p0y, p1x, p1y){

   // Any suggestions for a formula or algorithm?

  return y;

};

我在此项目上未使用任何库,也无法使用任何第三方库。

谢谢!

编辑:这是我想出的代码。这是此代码jsfiddle.net/fQYsU的改编。

var p1 = {0.5, 0.5};
var p2 = {0.5, 0.5};

cubic-bezier(t, p1, p2){

       var cX = 3 * (p1.x),
           bX = 3 * (p2.x - p1.x) - cX,
           aX = 1 - cX - bX;

       var cY = 3 * (p1.y - 1),
           bY = 3 * (p2.y - p1.y) - cY,
           aY = -1 - cY - bY;

       var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t);
       var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + 1;

       return {x: x, y: y};

   }

 var y = cubic-bezier(progress, p1, p2).y;

但是它返回的值对应于x,可能不是t。因此,我仍然不知道如何在正确的位置获得该值。

0 个答案:

没有答案