0

AIを搭載したアプリケーション「セルフスライディングパズル」などがあります。これを使用して、クールなポートフォリオギャラリーを作成します。

キューブをアニメーション化するメソッドが 1 つあります。

this.animateSelection = function(direction,time)
{   
    if (time===undefined) this.time=150;    
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time);
        break;

        //move down         
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time);            
        break;

        //move left         
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time);    
        break;

        //move up           
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time);        
        break;

        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

一度だけ呼び出すと、すべてがうまく機能します。

しかし、問題は次のとおりです。

私がする時

myClass.animateSelection('d');
alert('bla bla bla');

アニメーションが完了する前にアラートが表示されます

私のメイン AI ループは 50 ミリ秒で実行され、約 200 の動きを管理するため、メソッドを呼び出します。ANIMATIONが完了するまで、そのメソッドにループの実行を保持させたい。

コールバックは成功しません。アニメーション メソッドは、さまざまな状況で、さまざまな方法で使用されます。そのようにフィットさせることは不可能です。

4

1 に答える 1

1

スクリプトの実行を使用myClass.animateSelectionすると、ヒットしても停止しません$().transition。代わりに、トランジションは、イベント ループで呼び出される単純なトランジション エフェクトのキューを設定します。

これは非同期動作と呼ばれ、スクリプトが停止しないという利点があります。ただし、ほとんどの非同期関数はオプションのパラメーターとしてコールバックを受け取ります。これは、関数の目的の効果が終了または失敗した後に呼び出されます。

あなたの場合、transition追加のパラメーターとしてコールバックをサポートします：

$.fn.transition(options, [duration], [easing], [callback]);

animateSelectionコールバック引数を取るように変更する必要があります:

this.animateSelection = function(direction,time,callback)
{   
    if (time===undefined) this.time=150;
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time,callback);
        break;

        //move right            
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time,callback);
        break;

        //move right            
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time,callback);    
        break;

        //move right            
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time,callback);        
        break;

        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

と使用

myClass.animateSelection('d',undefined,function(){alert('bla bla bla');});

代わりは。

于 2012-08-04T14:42:51.933 に答える