0

ステップ関数に変数を渡して最終的なクロス ブラウザー フォールバック アニメーションを処理しようとしているときに、壁にぶつかりました。ここで汎用アニメーションメソッドを構築しました：

Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){
    obj.stop(true,true).animate(aniArgs,
        {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs,
         step:function(now,fx){     
        if($.isFunction(stepFunction)){ 
                     stepFunction.apply(this,arguments); 
        };      
     },complete:function(){
        if($.isFunction(completeFunction)){   
                     completeFunction.apply(this,arguments); };}});
         };
}

これは機能し、必要なものすべてをアニメーション化します。ただし、アニメーター関数を呼び出し、ステップ関数を使用してプロパティをアニメーション化しようとしています。呼び出しは次のとおりです。

var angle=0,            
    stepFunction=function(now,fx,angle){
    angle+=1;
        $(this).css({"-ms-transform":"rotate("+angle+"deg)"});
    };

Animator(obj,aniArgs,speed,easing,0,stepFunction,null);

渡される他のすべての引数は問題なく、適切にチェックアウトされます。obj はアニメーション化される obj、aniArgs はアニメーション化するすべての CSS 名/値を含むオブジェクト リテラル、speed は速度、easing はすべての CSS 名/イージング値を含むオブジェクト リテラル、stepFunction は上記で宣言された関数変数、および null実行する完全な機能がないことを示しています。

すべてがうまく機能していますが、ステップ関数で変数の問題が発生しています。実際のステップ関数内で角度の値を取得できないようです。ステップ内で、現在と fx をログに記録できます。これらは正常に機能していますが、初期値 0 で角度を渡すことができないため、角度をインクリメントできます。

私が間違っているアイデアはありますか？ありがとう！

4

2 に答える 2

2

. . @Beetroot-Beetroot がコメントの入力を終了する数秒前に言ったように、各呼び出し間の時間progress functionは必ずしも一定ではなく、angle変数に定数値を追加するとアニメーションが正しく表示されなくなります。

. . stepイベントは、jQuery documentationに従って、プロパティごとにティックごとに複数回呼び出される可能性があり、この場合にはあまり役に立たないパラメーターのセットを使用します。コールバックについて常にコメントしていましたprogressが、間違った名前を使用していました。jQueryが実装を変更したかどうかはわかりませんが（progressv1.8で関数が追加されたようです）、何らかの理由でこの「ステップ」名が頭に浮かびました。信じられないほどの GreenSock のトゥイーン ライブラリも「ステップ」という名前を使用していると思います。とにかく、jQuery では、 と の署名はstep次のprogressとおりです。

ステップ: 関数 (Number now, Tween tween):最初のパラメーターはアニメーション化される 1 つのプロパティの値で、2 番目のパラメーターはjQuery の tween オブジェクトです(propプロパティが含まれているため、値がどのプロパティnowを参照しているかがわかります)。

progress: function (Promise animation, Number progress, Number remainingMs):最初のパラメーターはアニメーションを表すjQuery promise オブジェクト、2 番目のパラメーターはアニメーションの進行状況のパーセンテージを表す 0 から 1 までの数値、3 番目のパラメーターは数値です。アニメーションが終了するまでのミリ秒。

. . あなたの目的のために、progressイベントは明らかに必要なものです。関数で渡すオブジェクトのstepプロパティをに変更することを忘れないでください。progressjQuery.animateAnimator

. . at each 呼び出しprogress内の現在の角度を計算する係数として、値 (アニメーションの進行状況のパーセンテージを示す 0 と 1 の間の値であるため)を使用する必要があります。progress function

progressFunction = function(animation, progress, lastingms) {
  var startAngle = 0, endAngle = 180;
  var angleRange = endAngle -startAngle;
  var curAngle = startAngle +(angleRange *progress);
  $(this).css({"-ms-transform":"rotate("+ curAngle +"deg)"});
};

. . アニメーション化する値がさらに必要な場合は、同じロジックを使用します。

progressFunction = function(animation, progress, lastingms) {
  var startA = 0, endA = 180, rangeA = (endA -startA);
  var startX = 254, endX = 894, rangeX = (endX -startX);

  var curA = startA + rangeA *progress;
  var curX = startX + rangeX *progress;
  $(this).css({
    "-ms-transform":"rotate("+ curAngle +"deg)",
    'left': curX +'px'
  });
};

. . コードの多くの部分でライブラリとして使用する予定がある場合は、この同じロジックをずっと書き続ける必要がないように、何らかの形でより自動化することを試みることは理にかなっています。

于 2013-04-29T23:31:17.120 に答える
0

ステップ関数への引数は、アニメーション インフラストラクチャによって固定されています。引数の固定セットを使用してインフラストラクチャによって呼び出されるため、引数を追加することはできません。スタブ関数を作成し (あなたがしたように)、引数を追加してから、独自の関数を呼び出すことができます。

Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){
    // initialize angle
    var angle = 0;
    obj.stop(true,true).animate(aniArgs,
        {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs,
         step:function(now,fx){     
        if($.isFunction(stepFunction)){ 
                     // convert these args into an array
                     var args = Array.prototype.slice.call(arguments, 0);
                     // add angle onto existing arguments
                     args.push(angle);
                     // call the stepFunction with new arg added on to the end
                     stepFunction.apply(this,args); 
        };      
     },complete:function(){
        if($.isFunction(completeFunction)){   
                     completeFunction.apply(this,arguments); };}});
         };
}

または、.data()オブジェクトに対して begin animation を使用して、アニメーション期間中の任意の変数を格納できます。アニメーションを開始する前にオブジェクトの角度を設定すると、 を参照してステップ関数内からオブジェクトにアクセスして更新できるはずです$(this).data()。

これにより、グローバル変数を使用する必要がなくなり、同時に複数のオブジェクトのアニメーション化がサポートされます。

他の人が指摘しているように、良いアニメーションは、ステップ関数が呼び出された回数ではなく、経過時間に基づいて毎回次の位置を計算します。これにより、ブラウザで他のことが起こっているためにアニメーションが少し遅れたとしても、時間どおりにとどまることができます。

于 2013-04-29T23:29:31.207 に答える