CSS3 transition-timing-function as javascript function

Question

CSS3-Animations에 대해 Javascript-Fallback을 만들어 CSS 버전에 최대한 가깝게 만들어야합니다. 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)

누구나 자바 스크립트 기능에서 사용할 수있는 easings과 정확히 일치하는 알 고리즘을 알고 있습니까? 나는 사인, 쿼드, 엑스포 등의 이뉴징이 많이 있다는 것을 알고 있지만 (모두 http://easings.net/ 참조), 그것들은 모두 다른 것처럼 보입니다.

Answer 1

도식적으로 동일합니까? Webkit easing 예제에서 제공 한 포인트로 따라 잡은 커브 에서처럼, 일부 JS 함수에 의해 추적되는 예제와 동일합니다.

다음은 입방체 베 지어 이징에 대해 고유 한 Pn을 정의하는 방법입니다.

에 대한 설명 : http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html

나는 내가 담당자가없는 C/B 심판,하지만 그것을 무시 할 수없는 문서의 저자에 의해 연결된 자식이있다. 돼지예요.

Buuut : 같은 수학, 더 나은 이벤트 루프 관리, 위의 스크립트보다 훨씬 더 최근의 커밋, jquery.easing를 사용하여 : https://github.com/rdallasgray/bez

Answer 2

Scripty2 저장소가 자바 스크립트로 C 웹킷 구현의 직접적인 포트가있는 경우 여기서 포트를 찾을 수 있습니다 : 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)); 
}