0

我需要为 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 函数中使用的那些缓动的精确算法吗？我知道有很多缓动，如 Sine、Quad、Expo 等（参见http://easings.net/），但它们似乎都不同。

4

2 回答 2

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));
}
于 2016-05-04T20:45:17.500 回答
0

几何等价？就像用您提供的 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

于 2013-03-08T13:04:25.600 回答