【Javascript】YUIモーションopacity,Easing...

YUIモーションopacity,Easing...

---

1: 不透明度opacityとEasing
2: パディングpaddingとマージンmargin

前回と 前々回で、 YAHOO.util.Motionクラスを使い、HTML要素を動かすアニメーションを試してみました。

今回は、YAHOO.util.Motionクラスに継承されている、YAHOO.util.Animクラスの機能を利用してみます。以前試した opacityやpaddingなどを組み合わせてみます。

不透明度opacityとEasing

不透明度opacityは、YAHOO.util.Animとまったく同じ方法で利用できます。 まず、始めに以前試したYAHOO.util.Animでのopacityを確認してみましょう。

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

<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 chgOpa2(id){
   var myAnim = new YAHOO.util.Anim(
     id, { opacity : { from:1,to:0.3 } } ,0.8
   );
   myAnim.animate();
 }
</script>

<style>
#test2{ 
  width:120px;height:120px;background-color:#ffa8ef;padding:8px
}
</style>

<div id="test2">0.3までフェイドアウトします</div>
<br>
<form>
<input type="button" 
    value="フェイドアウトします" 
    onclick="chgOpa2('test2')">
</form>

この「Anim」の部分を「Motion」に置き換えて、opacityを追加し、Easingエフェクトも足してみます。

下記サンプルは、移動しながらフェイドアウトします。Easingエフェクトには、backBoth(少し戻って開始、少し超えて戻り終了)を適用してみました。

<script type="text/javascript">
 function chgOpa3(id){
   var myAnim = new YAHOO.util.Motion(
     id, { 
           points : { by:[200,0] } ,//移動
           opacity : { from:1,to:0.3 } 
         } ,
         0.8,
         YAHOO.util.Easing.backBoth//Easingエフェクト
   );
   myAnim.animate();
 }
</script>

<style>
#test3{ 
  width:120px;height:120px;background-color:#ffa8ef;padding:8px
}
</style>

<div id="test3">0.3までフェイドアウトします</div>
<br>
<form>
<input type="button" 
    value="移動しつつ、フェイドアウトします" 
    onclick="chgOpa3('test3')">
</form>

次はこのサンプルに、更にパディングpaddingとマージンmargin の処理を追加してみます。