どうやって簡単にYUIを使ってJavaScriptアニメーションを作りますか?

原文の住所:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/
YUIのアニメはまさにアートワークです.他の伝統的なJSライブラリと違って、直接実行可能な「プリセット」の効果を提供します.反対に、開発者が自分の好きなものを作ってくれます.この点では、アニメや変換効果を適切に実行するのが好きです.多ければ多いほどいいです.
このように言っても問題があります.アニメーションAPIは非常に「下の階」の仕事で、しかも時間をかけてやる必要があります.サブクラスの構築関数はまた長又にあります.そのため、前回のバージョンではYAHOO.ext.Elementのアニメーション効果をできるだけ簡単に呼び出すようにしています.実は、このサイトではほとんどの効果が完成しています.
もし私が複雑な効果をしたいなら、どうすればいいですか?ある効果が完了すると、YUIは関数としてフィードバックを提供することができます.唯一の問題は、その関数内では、各ステップの効果のパッケージが良く、コードが複雑で怖いです.もう一つの問題は、同じ時間内に複数の要素がアニメーション効果を発揮すると、コードは各要素が持つコールバック関数の成長とともに持続的に増加するということです.Yahoo UIと言わざるを得ません.この面では、開発に使うのはちょっと難しいです.特に日に日にこのような効果が使われています.
新版のyui.extには元々yuiがアニメを作るために必要な複雑なコードが含まれています.思ったよりも簡単です.ここは機能リストです.
*アニメーションの順番を自動的に調整する--コールバック関数はもうありません.
*複数の要素を扱うアニメーションの方が便利です.属性を設定してください.
*複数の要素のアニメーション効果に対して、自動同期と調整の順番--Actorsを追加するだけで、アニメイトに同期できます.
*いくつかのよく使われているプリセット効果(ユイはメモリリークを起こさないが、script.aculo.usの眩しい効果を置き換えたりコピーしたりしないでください.
*アニメーション中の任意の関数の実行を許可します.
*アニメーション中に自動調整の同期関数を呼び出すことができます.
*アニメーションリスト(アニメーション効果のセット)は、必要に応じて事前定義と実行ができます.
はい、コード部分に入るのを見ましょう.
idをexampleのdivとして新たにactorオブジェクトを作成します.三つ目のパラメータは、直ちにキャプチャ動作を開始することを教えます.そうでなければ、startCatureを呼び出す必要があります.falseであれば、標準的な要素オブジェクトであり、同時にすべての呼び出しを実行します.

var exdiv = new YAHOO.ext.Actor('example', null, true);

上から移動する効果があります.

exdiv.moveIn('top');

アニメーションを再生:

exdiv.play();

別の例:
これはサンプルの目的はナビゲーションで交換することです.
アニメイトでは、1つ以上の要素の並べ替えや同期をサポートしています.
アニメーションを作成して、二つのActor(this.minbar and this.dockbar)を含んで、彼らの動きを捉え始めます.

var anim = new YAHOO.ext.Animator(this.minbar, this.dockbar); 
anim.startCapture();

アニメーションを開始:

this.dockbar.setX(-this.dockedWidth); 
this.dockbar.setWidth(this.dockedWidth); 
this.dockbar.setVisible(true);

begins Sync()は、アニメイトグループに各actionsの動きを教えながら、これらのアニメを放送しています.

anim.beginSync(); 
this.minbar.move('left', this.minbar.getWidth()+this.margin, true, .35); 
this.dockbar.move('right', this.dockedWidth+this.margin, true, .4, null, YAHOO.util.Easing.easeOut); 
anim.endSync();

再生が完了したらこのcalbackを実行します.

anim.play(this.fireDocked);

もっと複雑な例
Click here to see what it does.
Sorry,this depended on old blog layout andのlonger works.I won't go step by step but notice how the code flows like a normal javascript ap?You would never know ththat there are over 10 different asyncronous anmatitititionbeing sequenced.Notice the asynccalstoo-those arararcaling to my navbar and telling to to dock or undock、which alsoperformothe mothethethe mmmthe mmmmmthe thethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethethe mmmmmmmycocococococococococococococococococococococococococoI am bigファンof spacing code into logical blocks!
2

var animator = new YAHOO.ext.Animator();
var cursor = new YAHOO.ext.Actor('cursor-img', animator);  
var resize = new YAHOO.ext.Actor('resize-img', animator); 
var click = new YAHOO.ext.Actor('click-img', animator);  
var splitter = new YAHOO.ext.Actor('splitter', animator);   
animator.startCapture();  
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);  
cursor.show();  
cursor.moveTo(500,400);  
cursor.moveTo(20, getEl('navbar').getY()+10, true, .75); 
click.clearOpacity(); 
click.show();  
click.alignTo(cursor, 'tl', [-4, -4]); 
animator.pause(.5);  
click.hide(true, .7);    
animator.addAsyncCall(Blog.navbar.dockDelegate, 1);    
cursor.alignTo('splitter', 'tr', [0, +100], true, 1); 
resize.alignTo('splitter', 'tr', [-12, +100]);
animator.beginSync(); 
cursor.hide();  
resize.show();  
animator.endSync();  
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
animator.pause(2);
resize.hide(); 
cursor.show(); 
cursor.moveTo(-100, -100, true);   
animator.stopCapture();  
animator.play();

アニメが好きなら、yuiを好きになります.特にアニメを作るのはもっと簡単です.
これらの機能はYAHOO.ext.UpdateManagerにも含まれています.これはYAHOO.util.CC nectを使ってAJAX元素を更新するシンプルなAPIです.イベントドライバによってYAHOO.util.Connectコードがより簡潔になります.一番いいのは、自分で内部のコードを見に行きます.今はとても疲れています.もうBLOGを書くことができません.