【Javascript】YUI アニメーションto,by,unit...

YUI アニメーションto,by,unit...

---

1: 絶対指定toと相対指定by
2: attributesを別指定する
3: 単位unit

前回は、 YAHOO.util.Animクラスの第2引数、attributes に「width」と「height」を指定して、HTML要素の幅などを動かすアニメーションを試してみました。

その際、アニメーション開始地点の値は「from」、停止地点の絶対的な値を「to」で指定しました。今回は、相対的な指定「by」と値の単位「unit」を試します。

絶対指定toと相対指定by

前回使った「to」は、絶対的な値指定を行います。たとえば、widthが「to:100」なら、100pxへ幅を伸ばします。 これに対して相対的に変化させる「by」というプロパティがあります。

たとえば、widthが「by:100」なら、100px分幅を追加して伸ばします。つまり、元の幅がもし150pxなら「150+100」で「250px」になるまで幅を伸ばすわけです。 これに対して、絶対指定である「to:100」なら、元の幅が150pxでも10pxでも「100px」の幅になります。

とりあえず、簡単なサンプルを見てみます。何度かクリックしてみてください(サンプルはこのページのレイアウトの関係で400pxで停止させています。下記のソースでは省略しましたが、この停止方法はページ一番下のソースをご覧ください

このコードは次の通りです。

<script type="text/javascript"
        src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../build/dom/dom-min.js"></script>

<script type="text/javascript">
 function chgW1(id){
   var myAnim = new YAHOO.util.Anim(
     id, { width : { by: 100 } } ,0.3
   );
   myAnim.animate();
 }
</script>

<style>
#test1{ width:150px;height:20px;background-color:#ddd}
</style>

<div id="test1">100px分伸びます</div>
 
<form>
<input type="button" 
    value="幅が100px伸びます" 
    onclick="chgW1('test1')">
</form>

attributeを別指定する

ここで、第2引数の指定方法を少し見直してみます。

前回も第2引数のオブジェクトへは「myAnim.attributes.width.from=90;」などのようにアクセスできるという話を書きましたが、つまり、 第2引数はオブジェクトなわけですから、別の場所で指定することも、作成して渡すこともできるのです。 そこで、前項のサンプルと同じ動作をするサンプルをいくつか作ってみます。

前項の第2引数を取り出すと次の通りです。

 { width : { by : 100 } }

これを変数に代入すると、いわゆるインスタンスのように利用することができます。たとえば、下記のスクリプトでは、 alert(test.width.by)によってアラートダイアログに「100」が表示されます。

 var test = { width : { by : 100 } };
 alert(test.width.by);

つまり、この変数 test はオブジェクトであり、前項のサンプルスクリプトは、次のように外へ取り出しても書けるわけです。

 var test = { width : { by : 100 } };
 function chgW1(id){
   var myAnim = new YAHOO.util.Anim(id, test,0.3);
   myAnim.animate();
 }

あるいは、普通のJavaScriptオブジェクトのようにクラスを作成してから渡しても同じことができます。ただ、少し長くなります。

 function Test_Attributes(){
   this.width=new function(){
     this.by=100;
   }
 }
 var test= new Test_Attributes();
 
 function chgW3(id){
   var myAnim = new YAHOO.util.Anim(id, test ,0.3);
   myAnim.animate();
 }

せっかくなので、前回書いた「myAnim.attributes.width.from=90;」といった書き方の実例も見ておきます。

 function chg4(id,attr,value){
   var myAnim = new YAHOO.util.Anim(id,{width:{}},0.3);
   myAnim.attributes.width.by=100;
   myAnim.animate();
 }

* 参考までに、このページのレイアウトの関係で400pxで停止させているソースは次のようなスクリプトです。 メソッドでmyAnim.stop()も用意されているのですが、ここではきっぱり止めるために、oj.style.widthの値を判定し、return文で動作を中止しています。

 function chgW1(id){
 
   //幅400px以上なら動作しない
   if(parseInt(document.getElementById(id).style.width)>400)return;
 
   var myAnim = new YAHOO.util.Anim(
     id, { width : { by: 100 } } ,0.3
   );
   myAnim.animate();
 }

次に、単位unitを試してみます。

次ページ