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

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

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

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

<animatorgrpup>

<animatorgrpup>を使うと，複数の<animator>をひとまとめにして順番あるいは同時に動作させることができます。

リスト7のように<animatorgroup>の中に<animator>を入れていきます。デフォルトでは上から順番に実行されていきます。サンプルの赤四角をクリックしてみてください。

リスト7 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false">
      <animator attribute="x" to="200" duration="700" />
      <animator attribute="y" to="50" duration="700" />
      <animator attribute="x" from="200" to="0" duration="700" />
      <animator attribute="y" from="50" to="0" duration="700" />
    </animatorgroup>
  </view>
</canvas>

リスト7 サンプル

process属性

<animatorgroup>にprocess="simultaneous"をつけると，<animator>をすべて「同時に実行」します。デフォルトはsequentialで「順番に実行」です。

リスト8のサンプルの四角をそれぞれクリックしてみてください。xとy同時に変化させているので斜めに移動しますが，durationを微妙に変えると動作も変わります。

リスト8 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false" process="simultaneous">
      <animator attribute="x" from="0" to="200" duration="900" />
      <animator attribute="y" from="0" to="100" duration="900" />
    </animatorgroup>
  </view>
  <view y="50" width="50" height="50" bgcolor="green" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false" process="simultaneous">
      <animator attribute="x" from="0" to="200" duration="700" />
      <animator attribute="y" from="50" to="0" duration="900" />
    </animatorgroup>
  </view>
  <view y="100" width="50" height="50" bgcolor="blue" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false" process="simultaneous">
      <animator attribute="x" from="0" to="200" duration="900" />
      <animator attribute="y" from="100" to="50" duration="700" />
    </animatorgroup>
  </view>
</canvas>

リスト8 サンプル

motion属性も変更すると簡単に面白い動きをさせることができます。

リスト9 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false" process="simultaneous">
      <animator attribute="x" from="0" to="200" duration="1000" motion="linear"/>
      <animator attribute="y" from="0" to="100" duration="1000"  />
    </animatorgroup>
  </view>
</canvas>

リスト9 サンプル

<animatorgroup>の中に<animatorgroup>を入れ子にすることもできます。リスト10は，(1)x移動，(2)y移動，(3)xとyの同時移動，の例です。

リスト10 

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animatorgroup name="anm" started="false">
      <animator attribute="x" to="200" duration="700" />
      <animator attribute="y" to="100" duration="700" />
      <animatorgroup process="simaultaneous">
        <animator attribute="x" from="200" to="0" duration="700" />
        <animator attribute="y" from="100" to="0" duration="700" />
      </animatorgroup>
    </animatorgroup>
  </view>
</canvas>

リスト10 サンプル

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

著者プロフィール

ason（あそん）

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

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