我正在制作动画库,并且有一个在计时器运行时从0递增到1(图形中的X轴)的变量。我现在想以类似于CSS函数 cubic-bezier 的方式对函数应用缓动。
我的目标是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。因此,我仍然不知道如何在正确的位置获得该值。