作爲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轉換時序函數

回答

相關問題