CSS3 transition-timing-function as javascript function

Question

我需要为 CSS3-Animations 创建一个 Javascript-Fallback，并尝试使其尽可能接近 CSS-Version。 在 CSS3 中，有 4 个预定义的缓动函数：

• 缓动： cubic-bezier(0.25, 0.1, 0.25, 1)
• 缓入： cubic-bezier(0.42, 0, 1, 1)
• 缓出： cubic-bezier(0, 0, 0.58, 1)
• 缓入缓出： cubic-bezier(0.42, 0, 0.58, 1)

有谁知道可以在 Javascript function 中使用的与那些 easings 完全相同的算法吗？ 我知道有很多缓动函数，例如 Sine、Quad、Expo 等（参见http://easings.net/ ），但它们似乎都不同。

Answer 1

Scripty2存储库具有C WebKit实现到JavaScript的直接端口，您可以在以下位置找到该端口： https : //github.com/madrobby/scripty2/blob/master/src/effects/transitions/cubic-bezier.js ，但这是中心功能（无依赖项）。

function CubicBezierAtTime(t,p1x,p1y,p2x,p2y,duration) {
var ax=0,bx=0,cx=0,ay=0,by=0,cy=0;
function sampleCurveX(t) {return ((ax*t+bx)*t+cx)*t;};
function sampleCurveY(t) {return ((ay*t+by)*t+cy)*t;};
function sampleCurveDerivativeX(t) {return (3.0*ax*t+2.0*bx)*t+cx;};
function solveEpsilon(duration) {return 1.0/(200.0*duration);};
function solve(x,epsilon) {return sampleCurveY(solveCurveX(x,epsilon));};
function fabs(n) {if(n>=0) {return n;}else {return 0-n;}};
function solveCurveX(x,epsilon) {
  var t0,t1,t2,x2,d2,i;
  for(t2=x, i=0; i<8; i++) {x2=sampleCurveX(t2)-x; if(fabs(x2)<epsilon) {return t2;} d2=sampleCurveDerivativeX(t2); if(fabs(d2)<1e-6) {break;} t2=t2-x2/d2;}
  t0=0.0; t1=1.0; t2=x; if(t2<t0) {return t0;} if(t2>t1) {return t1;}
  while(t0<t1) {x2=sampleCurveX(t2); if(fabs(x2-x)<epsilon) {return t2;} if(x>x2) {t0=t2;}else {t1=t2;} t2=(t1-t0)*.5+t0;}
  return t2; // Failure.
};
cx=3.0*p1x; bx=3.0*(p2x-p1x)-cx; ax=1.0-cx-bx; cy=3.0*p1y; by=3.0*(p2y-p1y)-cy; ay=1.0-cy-by;
return solve(t, solveEpsilon(duration));
}

Answer 2

几何上等效？ 就像在您提供的Webkit宽松示例中所描绘的点上的曲线是否等效于某些JS函数所跟踪的曲线一样？

这是定义三次贝塞尔曲线缓和的自己的Pn的方法。

说明： http : //st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html

文章作者链接了一个git，我无法引用b / c，我没有代表，但可以忽略它。 这是一只猪。

Buuut：与上述脚本相比，使用jquery.easing可以实现相同的数学运算，更好的事件循环管理以及最新的提交方式： https ： //github.com/rdallasgray/bez

Answer 3

这是 ease out 的简单版本：

function lazyEase(now, end, speed) {
    return now + (end - now) / speed;
}
let x = 200
let nx = 900
function loop() {
    x = lazyEase(x,nx,30)
    update()
},