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 リポジトリには、JavaScript への C WebKit 実装の直接ポートがあります。ポートは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 に答える