【Javascript】YUIカラーアニメ

YUIカラーアニメ

---

1: クリックでCSSによる色を変える
2: YAHOO.util.ColorAnim の書式

YUIアニメーション (Animation Utility)には、これまで試してきた YAHOO.util.Anim や YAHOO.util.Motion の他にもいくつかのクラスが用意されており、それらはすべてanimation.js(あるいはanimation-min.js)に同梱されています。

( * animation.jsなどのYUIファイルについては、YUIのファイル構成をご参照ください。)

実は、Motionの中で利用した ベジェ曲線 の計算には、Animation Utilityの中の YAHOO.util.Bezier というクラスが利用されており、また、 Easingエフェクトで もYAHOO.util.Easing というクラスが使われています。

今回は、同様にAnimation Utilityに含まれるクラスの一つであるYAHOO.util.ColorAnim を使って、 背景色やボーダーカラーのエフェクトを試してみます。

このエフェクトは、たとえば、画面変化の少ないAjaxページにおいて、データ処理時にどこが変化したのかを明示する小技として、いわゆる「イエローフェイド」などのような機能を手軽に実装するのに便利です。

クリックでCSSによる色を変える

とりあえず、簡単なサンプルを見てみましょう。ボタンクリックすると、 CSSで指定された、color、border、background-colorの各色が変化します。

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

<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">

//ネームスペースを作成
YAHOO.namespace('myTest2');

//初期化
YAHOO.myTest2.init = function() {   

   //変化後の各CSS色を指定
   var atrr = {       color: {from:'#000000',to:'#ffffff'},       backgroundColor: {from:'#ffe73c',to:'#cec37c'},       borderColor: {from:'#ffe73c',to:'#d7b4ff'}
   };
   
   //ColorAnimのインスタンス
   YAHOO.myTest2.anim=new YAHOO.util.ColorAnim('test2',atrr,0.5);
};

//要素'test2'が構築されたらYAHOO.myTest2.initを実行する
YAHOO.util.Event.onAvailable('test2', YAHOO.myTest2.init);

</script>

<style>
#test2{ 
  width:120px;
  height:120px;   color:#000000;   border:12px solid #ffe73c;   background-color:#8fff10
}
</style>

<div id="test2"><span style="width:120px">色が変わります</span></div>

<form>
<input type="button" 
    value="色が変わります" 
    onclick="YAHOO.myTest2.anim.animate()">
</form>

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

また、前回同様に、はじめに、 自分用のネームスペース myTest2 を作成し、 スクリプト内の変数や配列が衝突してしまうリスクを減らしています。

このコードでは、styleタグ内で指定したCSS色を、ボタンクリックで変化させています。

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

   //ColorAnimのインスタンス
   YAHOO.myTest2.anim=new YAHOO.util.ColorAnim('test2',atrr,0.5);

このサンプルでは、第1引数「'test2'」が示すDOM要素をアニメーションさせます。 第2引数のatrrオブジェクトへ、YAHOO.util.Anim と同様に、後述のように、CSS毎のアニメーション属性をセットして 渡し、第3引数は持続時間を渡します。また、ここでは省略していますが第4引数は アニメーションメソッド(デフォルト値は、YAHOO.util.Easing.easeOut)です。

この指定された色の変化を実行するには、YAHOO.util.AnimやYAHOO.util.Motionの時と同じメソッド oj.animate()を記述しますが、 今回は、ボタンのonclickイベントに仕込んであります。

つまり、このボタンをクリックすると、各CSS色が変わり始めるわけです。

第2引数用のオブジェクトは、あらかじめ、変化後のCSS色をtoプロパティの値として指定しています。 CSS色の書式は、次の通り、いわゆるJavaScript形式(キャメル形式)のCSS名となります。

   //変化後の各CSS色を指定
   var atrr = {
      color: { to:'#ffffff' },
      backgroundColor: { to: '#ffd34c' },
      borderColor: { to:'#d7b4ff' }
   };

次ページでは、YAHOO.util.ColorAnim の書式を確認します。