【Javascript】YUI アニメーション1

YUI アニメーション1

---

1: 簡単なサンプル
2: YAHOO.util.Anim の書式
3: Easingでエフェクト

前回は、 YUI(Yahoo! User Interface Library)ライブラリのダウンロードから設置 までの説明でしたが、 今回は、YUIに含まれるさまざまなコンポーネントの中から「アニメーション」についての簡単な解説を行います。

「アニメーション」といってもマンガや物語を作成するわけではありません。DOM要素を移動したり、サイズを拡大縮小したり、 不透明度を変化させたりといった、DHTMLの機能を簡易な方法でサポートしてくれる命令群といったものです。

簡単なサンプル

とりあえず、簡単なサンプルを見てみましょう。

サンプル→DIVの幅を伸ばします

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

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

<script type="text/javascript">

function chgWidth(){
	var myAnim = new YAHOO.util.Anim('test',{width:{to:200}});
	myAnim.animate();
}

</script>

<div id="test" 
     style="width:0px;height:50px;background-color:#ddd">　</div>
 
<form>
<input type="button" 
    value="幅を200pxに伸ばします" 
    onclick="chgWidth()">
</form>

上記コードの意味は、ざっくりいうと、ボタンクリックで、DIV要素「test」の幅「width」をto「200(px)」になるまで グイーンと伸ばす、といったところです。

上記コードのscript要素のsecによるyahoo-min.jsなどのYUIライブラリ群読込み部分は、 前回の記事をご確認ください。

このコードのポイントは、「new YAHOO.util.Anim()」の部分です。ここで、YUIが用意したアニメーション用クラス 「Anim」を「new」によって使える状態(インスタンスmyAnim)にしています。

その属性は、Animの引数で指定し、myAnim.animate()で実行します。

このサンプルでは、第1引数「'test'」が示すDOM要素をアニメーションさせます。 第二引数のオブジェクトに書かれたプロパティ「width」を、 更にその配下のオブジェクト内のプロパティ「to」の値「200(px)」になるまで伸ばしていきます。

伸ばす時間は、本来は第3引数へ指定するのですが、ここでは省略時のデフォルト値1秒かけて伸びていきます。もし、 第3引数へ「10」と書けば10秒かけて動作するよういなります。

更に、その伸ばし方のアクションにも下表のメソッド一覧のような数種類のパターンがあり、ここでは省略時のデフォルト値、 YAHOO.util.Easing.easeOutが使用されています。

YAHOO.util.Anim の書式

YAHOO.util.Animクラスは、build/animation/animation.jsまたはanimation-min.jsファイルに含まれていますので、 これを読み込んで使いますが、その書式は次のようなものです。 できれば、animation.jsファイルを開いてそのクラスの中身を自分で確認してみることをお勧めします。

YUIのソースは丁寧に書かれていてわかりやすく、どんな機能がどんな形で実装されているのかが具体的にわかりますから きっと役に立つはずです。

oj = YAHOO.util.Anim (el, attributes, duration, method)
引数
el	(第1引数) アニメーションさせたいエレメント名または、エレメント
attributes	(第2引数) アニメーション属性のオブジェクト。 例 : { width: { from: 10, to: 100 } } 少なくとも“to"か“by"を定義しなければならない。 fromは開始値、toは終了値。属性名はキャメルケース。
duration	(第3引数) 持続時間(オプショナル)。デフォルト値は1秒。
method	(第4引数) アニメーションメソッド(オプショナル)。 デフォルト値は、YAHOO.util.Easing.easeNone
	メソッド一覧 backBoth 少し戻って開始、少し超えて戻り終了 backIn 少し戻って開始 backOut 少し超えて戻り終了 easeBoth ゆっくり始まって、終わりに向かって減速 easeIn ゆっくり始まって、終わりに向かって加速 easeNone 一定の速度 easeOut 急速に始まって、終わりに向かって減速

次ページ