2

html5キャンバスでいくつかのトランジションを次々にキューに入れたいです。遷移関数をループすると、すべての遷移が一度に呼び出されます。反復が100を超える場合にコールバックがこれを行うかどうかはわかりません。次のようなことをしたいのですが、-

for（i = 0; i <10; i ++）{ move(circle,Math.floor(Math.random()*1000),400); }

moveは、いくつかの遷移を行う定義済みの関数です。完全に正常に機能します。

ここでは、反復ごとに円の位置を変更したいのですが、位置を変更するのは1回だけです。

4

3 に答える 3

1

あなたはこれを行うことができます：

var i=10;
var interval = window.setInterval(function(){
    move(circle,Math.floor(Math.random()*1000), 400);
    console.log(i);
    if(!--i) {
        window.clearInterval(interval);
    }
}, 400); // wait 400 msecs between calls

または、遷移が完了した後、move関数がコールバック関数を呼び出すことをいとわなかった場合：

var i=10;
var callback = function(){
    if(i--){
        move(circle,Math.floor(Math.random()*1000),400, callback);
    }
}
callback();
于 2013-02-27T10:57:53.853 に答える
1

うん、コース。これは問題の正確な解決策ではありませんが、一種のトリックです。最初に命令を別の配列（遷移シーケンス）に格納し、コールバックへの再帰コールバック（動的に定義されたコールバック）を使用しました。あまり効率的な方法ではありませんが、問題が解決する限り気にしません。:)

`関数move2（i、limit）{

   var obj = transitionsequence[i].object;
    obj.transitionTo({
      y:100,
      duration: 0.3,
      callback : function()
      {
        obj.transitionTo({
          x:transitionsequence[i].x,
          duration:0.3,
          callback: function()
          {
            obj.transitionTo({
              y:transitionsequence[i].y,
              duration:0.3,
              callback: function()
              {
                if(i < limit)
                move2(i+1 , limit);
              }
            });

          }
        });
      }                          
    });

  };`
于 2013-03-02T16:14:40.203 に答える
0

アプローチが機能しない理由は、ブラウザがペイントステップの間にキャンバスを再ペイントする機会を得られないためです。従来、これは1つのステップ（フレーム）をレンダリングしてから少し待つことで解決されていましたが、最近のブラウザーで利用できるrequestAnimationFrame新機能があります。これは、まさにその問題を解決します。

「 JavaScriptを使用したアニメーション：from setIntervaltorequestAnimationFrame and requestAnimationFramefor Smart Animating 」を確認します（サポートされていないブラウザーでアニメーション化するためのシムを作成する方法も示していますrequestAnimationFrame）。

（kinetic.jsはわかりませんが、そのようなシムが直接サポートされている可能性もあります）。

于 2013-02-27T10:56:48.573 に答える