作为javascript函数的CSS3转换时序函数

我需要为CSS3动画创建一个Javascript-Fallback，并尽可能地使它与CSS版本接近。在CSS3，有4个预定义宽松函数：作为javascript函数的CSS3转换时序函数

易于：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函数中使用的那些缓动的确切algorythmical等价物？我知道有很多像Sine，Quad，Expo等缓存（见http://easings.net/），但它们看起来都不一样。

来源

2013-03-08 Timo Hausmann

几何等价？在跟踪Webkit缓动示例中提供的点的曲线中，您提供的示例等同于可由某个JS函数追踪的示例？

这里有一种方法来定义你自己的立方贝塞尔宽松Pn。

的解释：http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html

还有通过我不能REF B/C我没有代表处，但忽略它的文章的作者链接的饭桶。这是一个猪。

Buuut：同数学，更好的事件循环管理，方式最新提交比上面的脚本，使用jquery.easing：https://github.com/rdallasgray/bez

来源

2013-03-08 13:04:25 scorbaPlex

的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-04 20:45:17 thomasfuchs

作为javascript函数的CSS3转换时序函数

回答

相关问题