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

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

OpenLaszlo, LZX, アニメーション, HTML5, Flash

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

円運動

三角関数を使った値の変化を利用するといろんな円運動をさせることができます。高度な技ですが面白いので紹介します。<attribute>というタグを使うと独自の属性（いわゆる変数みたいなものです）を作ることができ，その属性値を<animator>で変化させています。

リスト16 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view bgcolor="#ff0000" width="20" height="20" x="${r+(r*Math.cos(cnt))}" y="${r+(r*Math.sin(cnt))}">
    <attribute name="cnt"/>
    <attribute name="r" value="50"/>
    <animator attribute="cnt" from="0" to="$once{Math.PI * -2}" duration="1000" motion="linear" repeat="Infinity"/>
  </view>
</canvas>

リスト16 サンプル

リスト17は心電図みたいな動きをするサンプルです。

リスト17 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view bgcolor="#ff0000" width="20" height="20" x="0" y="${r+(r*Math.sin(cnt))}">
    <attribute name="cnt"/>
    <attribute name="r" value="50"/>
    <animator attribute="cnt" from="0" to="$once{Math.PI * -2}" duration="1000" motion="linear" repeat="Infinity"/>
    <animator attribute="x" from="0" to="${canvas.width}" duration="7000" motion="linear" repeat="Infinity"/>
  </view>
</canvas>

リスト17 サンプル

リスト18は楕円運動です。

リスト18 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view x="150" y="150">
    <view bgcolor="blue" width="20" height="20" 
      x="${(Math.cos(radAngle)*Math.cos(radDegree)*rLong) - (Math.sin(radAngle)*Math.sin(radDegree)*rShort)}"
      y="${(Math.cos(radAngle)*Math.sin(radDegree)*rLong) + (Math.sin(radAngle)*Math.cos(radDegree)*rShort)}">
      <attribute name="rLong" value="120"/>
      <attribute name="rShort" value="50"/>
      <attribute name="degree" value="45"/>
      <attribute name="angle"/>
      <attribute name="radDegree" value="${Math.PI/180*(degree)}"/>
      <attribute name="radAngle" value="${Math.PI/180*angle}"/>
      <animator attribute="angle" from="0" to="360" duration="1000" motion="linear" repeat="Infinity"/>
    </view>
  </view>
</canvas>

リスト18 サンプル

リスト19は3Dっぽい奥行き感のある楕円運動です。

リスト19 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view x="20" y="20">
    <view bgcolor="#ff0000" width="${this.y/4+20}" height="${this.width}" x="${r+(r*Math.cos(cnt))}" y="${(r+(r*Math.sin(cnt)))/5}" opacity="${this.y/200+0.4}">
      <attribute name="cnt"/>
      <attribute name="r" value="200"/>
      <animator attribute="cnt" from="0" to="$once{Math.PI * 2}" duration="3000" motion="linear" repeat="Infinity"/>
    </view>
  </view>
</canvas>

リスト19 サンプル

ビューの間隔の変化

<simplelayout>のspacing属性も数値なのでアニメーション変化させることができます。

リスト20 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout id="sl" axis="x"/>
  <button onclick="this.anm.doStart()">TEST
    <animatorgroup name="anm"  started="false">
      <animator attribute="spacing" target="sl" to="20" duration="700"/>  
      <animator attribute="spacing" target="sl" to="0" duration="700" />  
    </animatorgroup>
  </button>
  <view width="30" height="30" bgcolor="red"/>
  <view width="30" height="30" bgcolor="blue"/>
  <view width="30" height="30" bgcolor="aqua"/>
  <view width="30" height="30" bgcolor="green"/>
</canvas>

リスト20 サンプル

文字サイズの変化

<text>のfontsize属性も数値なのでアニメーション変化させることができます。

リスト21 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout id="sl" axis="x"/>
  <button onclick="this.anm.doStart()">TEST
    <animatorgroup name="anm"  started="false">
      <animator attribute="fontsize" target="t" to="50" duration="700"/>  
      <animator attribute="fontsize" target="t" to="12" duration="700" />  
    </animatorgroup>
  </button>
  <text id="t">Hello World</text>
</canvas>

リスト21 サンプル

色の変化

bgcolor属性も数値ですが，値の通常の形式は0xff0000のように16進数表記なので変化させるには大変です。でもrgb(R,G,B)形式で表した場合，R，G，Bそれぞれが10進数なので簡単に変化させることができます。

リスト22のサンプルはTestボタンを押すと四角の色がランダムに変わっていきます。

リスト22 

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="20"/>
  <view id="v" width="210" height="50" bgcolor="${'rgb('+this.R+','+this.G+','+this.B+')'}" >
    <attribute name="R" value="255"/>
    <attribute name="G" value="0"/>
    <attribute name="B" value="0"/>
  </view>
  <button onclick="parent.anm1.doStart();parent.anm2.doStart();parent.anm3.doStart();">Test</button>
  <animatorgroup name="anm1" started="false" target="v" repeat="Infinity">
    <animator attribute="R" from="255" to="0" duration="2222"/> 
    <animator attribute="R" from="0" to="255" duration="2222"/> 
  </animatorgroup>
  <animatorgroup name="anm2" started="false" target="v" repeat="Infinity">
    <animator attribute="G" from="0" to="255" duration="3333"/> 
    <animator attribute="G" from="255" to="0" duration="3333"/> 
  </animatorgroup>
  <animatorgroup name="anm3" started="false" target="v" repeat="Infinity">
    <animator attribute="B" from="0" to="255" duration="4444"/> 
    <animator attribute="B" from="255" to="0" duration="4444"/> 
  </animatorgroup>
</canvas>

リスト22 サンプル

まとめ

アニメーション効果は楽しいですが，くれぐれも使いすぎにご注意ください(^^;)。

OpenLaszlo, LZX, アニメーション, HTML5, Flash

著者プロフィール

ason（あそん）

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

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