OpenLaszloでマルチデバイス対応RIAを作ろう

第7回 アニメーション効果

この記事を読むのに必要な時間:およそ 10 分

応用編

x,y以外での使用例を紹介します。

透明度を変化

透明度はopacity属性で指定します。値は0~1です。0が完全透明,1が不透明です。0.5だと半透明。この値を変化させることでフェードイン,フェードアウトなどの効果を実現できます。スライドショーなどでよく使う効果ですね。サンプルでは2回繰り返しています。間隔を短くすれば点滅にできます。

リスト11

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false" repeat="2" >
      <animator attribute="opacity" to="0" duration="1000" />
      <animator attribute="opacity" to="1" duration="1000" />
    </animatorgroup>
  </view>
</canvas>

リスト11 サンプル

幅,高さの変化

width(幅)とheight(高さ)の変化によって,画面の表示・非表示を表現してみました。ついでにopacityでフェードイン・フェードアウトを追加し,ボタンの文字列も変えています。

リスト12

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button>Open
    <handler name="onclick">
      if(v.width==0){
        anm1.doStart();
        this.setAttribute('text',"Close");
      }else{
        anm2.doStart();
        this.setAttribute('text',"Open");
      }
    </handler>
  </button>
  <view id="v" y="30" width="0" height="0" bgcolor="red">
    <animatorgroup id="anm1" started="false" process="simultaneous" duration="500" >
      <animator attribute="width" to="200" />
      <animator attribute="height" to="150" />
      <animator attribute="opacity" to="1" />
    </animatorgroup>
    <animatorgroup id="anm2" started="false" process="simultaneous" duration="500" >
      <animator attribute="width" to="0" />
      <animator attribute="height" to="0" />
      <animator attribute="opacity" to="0" />
    </animatorgroup>
  </view>
</canvas>

リスト12 サンプル

回転

回転はrotation属性を使います。rotationでは角度を指定しますので,360だと一回転になります。

リスト13は赤四角をクリックすると回転しますが,回転軸が左上になっています。これは基準点が赤四角にとってのx:y=0:0になっているからです。

リスト13

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view align="center" valign="middle" width="50" height="50" bgcolor="0xff0000" onclick="this.anm.doStart()">
    <animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
  </view>
</canvas>

リスト13 サンプル

リスト14は赤四角をクリックすると回転しますが,xoffsetとyoffsetで基準点をずらして回転軸を真ん中に持ってきました。

リスト14

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view align="center" valign="middle" xoffset="${this.width/2}" yoffset="${this.height/2}" width="50" height="50" bgcolor="0xff0000" onclick="this.anm.doStart()">
    <animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
  </view>
</canvas>

リスト14 サンプル

リスト15はリスト13と14をくっつけてそれぞれの回転軸の違いがわかるようにしました。グレー四角をクリックするとそれだけが,赤四角をクリックすると両方が回転します。

赤四角が回転するとrotation値が変化しますが,その値をグレー四角のほうでコンストレイントを使ってrotationに自動セット(rotation="${v.rotation}")しているためグレー四角も同時に回転するという仕掛けです。

リスト15

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view align="center" valign="middle" xoffset="${this.width/2}" yoffset="${this.height/2}" width="50" height="50" bgcolor="gray" onclick="this.anm.doStart()" rotation="${v.rotation}" >
    <animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
  </view>
  <view id="v" align="center" valign="middle" width="50" height="50" bgcolor="red" onclick="anm.doStart()">
    <animator id="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
  </view>
</canvas>

リスト15 サンプル

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/