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が完了するまで、そのメソッドにループの実行を保持させたい。
コールバックは成功しません。アニメーション メソッドは、さまざまな状況で、さまざまな方法で使用されます。そのようにフィットさせることは不可能です。