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

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

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

今回はRIA(リッチインターネットアプリケーション)らしい演出を可能にする楽しいアニメーション効果について解説します。アニメーション効果はx(横位置)⁠y(縦位置)⁠width(幅)⁠height(高さ)⁠opacity(透明度)など数値で表せられる属性の値を変化させることで実現しています。タグは<animator>およびそれをひとまとめにして実行するための<animatorgroup>を使います

<animator>

何を(attribute)⁠どの値から(from)⁠どの値へ(to)⁠どれぐらいの時間をかけて(duration)変化させるかという設定をするタグです。アニメーションの動作は,アプリ起動と同時に開始するか,あるいはボタンクリックなどのきっかけで開始するようにするかはstartedで指定します。

表1 <animator>の主な属性

属性内容
attribute変化させたい属性の名前。x,y,width,height,opacityなど。
from開始値。デフォルトは現在の属性値。
to終了値。
durationアニメーションさせる時間。単位はミリ秒。
startedアニメーションを自動開始するかどうか。デフォルトはtrueで自動開始。falseの場合は手動開始。
motionアニメーションの加速,減速の設定。設定値はlinear(一定速度)⁠easein(開始時に加速)⁠easeout(終了時に減速)⁠easeboth(開始時に加速,終了時に減速)⁠デフォルトはeaseboth。
relativetoで指定した値が初期値に対して相対的(true)か絶対的(false)かの指定。デフォルトはfalse。
repeat繰り返し数。repeat="Infinity"とすると永久に繰り返す。

アニメーションの開始,一時停止,停止をするためのメソッドがあります。

表2 <animator>の主なメソッド

メソッド内容
doStart()アニメーションを開始する。
pause()アニメーションの一時停止あるいは再開。
stop()アニメーションの停止。

基本セット(attribute,from,to,duration)と起動セット(started,doStart())

まずは<animator>の基本セットから。リスト1は赤い四角を表す<view>の中に<animator>を入れ子にしています。<animator>はデフォルトでは親タグに対して作用します。<animator>自身は画面に表示されませんがタグ自身が階層構造を持っているので,自分自身はthis,親タグはparentになります。逆に親タグの<view>から<animator>を指すときはその名前を指定します。

タグの記述位置などは前回記事で紹介した<handler>や<method>と使い方は似ていますが,階層構造の扱いが違うためthisやparentなどの意味が違うので注意してください。

リスト1を細かく解説すると,<animator>は,親タグのx属性値(attribute="x")を0から(from="0")200に(to="200")700ミリ秒(duration="700",=0.7秒)かけて手動開始で動かす,という設定になっています。親タグの<view>は,クリックされたら(onclick)自分の子タグであるのanmという名の<animator>(this.anm)を開始する(doStart())⁠という設定になっています。

started=falseなのでアプリ起動時には自動開始されず,doStart()実行により開始されます。started=falseとdoStart()は手動でアニメーション開始するためにセットで使います。

リスト1

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

リスト1 サンプル

リスト1はfrom="0"でしたが,<view>の元々のx値が0なのであってもなくても同じです。リスト2はfrom="100"にしました。青四角は最初x=0の位置に表示されていますが,クリックするとx=100の位置に瞬間移動してから動き出します。2回目からは毎回x=100から開始します。

リスト2

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

リスト2 サンプル

リスト3は<view>の初期位置をx=200,<animator>でfrom=200およびto=0にして,右から左へ移動するようにした例です。サンプルの緑四角をクリックしてみてください。

リスト3

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

リスト3 サンプル

motion属性

motion属性はアニメーションの加速,減速の設定をします。設定値は下記の4種類で,デフォルトはeasebothです。

  • linear(一定速度)
  • easein(開始時に加速)
  • easeout(終了時に減速)
  • easeboth(開始時に加速,終了時に減速)…デフォルト

リスト4では,4つの<animator>でそれぞれ別のmotionを設定しました。ボタンを押すとそれぞれのmotion設定で動作します。サンプルのTESTボタンをクリックしてみてください。

リスト4

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout />
  <button onclick="anm1.doStart();anm2.doStart();anm3.doStart();anm4.doStart();">TEST</button>
  <view width="50" height="50" bgcolor="red">
    <animator id="anm1" attribute="x" from="0" to="200" duration="3000" started="false"/>
  </view>
  <view width="50" height="50" bgcolor="blue">
    <animator id="anm3" attribute="x" from="0" to="200" duration="3000" started="false" motion="easein"/>
  </view>
  <view width="50" height="50" bgcolor="aqua">
    <animator id="anm2" attribute="x" from="0" to="200" duration="3000" started="false" motion="easeout"/>
  </view>
  <view width="50" height="50" bgcolor="green">
    <animator id="anm4" attribute="x" from="0" to="200" duration="3000" started="false" motion="linear"/>
  </view>
</canvas>

リスト4 サンプル

relative属性

relativeでは,to値が,初期値に対して絶対的(false)か相対的(true)かを指定します。デフォルトはfalseです。

何のことかというと,たとえばx属性についてto="30"なら,デフォルトのrelative=falseの場合はx=30に固定的に移動することになり,relative=trueの場合はxが30ずつ増えるということになります。

リスト5のサンプルの赤四角と青四角はrelativeがfalseかtrueの違いだけです。赤四角はクリックごとにx=30の位置に移動(=つまり見た目上は一回目のクリックで移動して終了 ですが,青四角はクリックするたびにxが30増加(右に移動していく)します。

リスト5

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5" />
  <view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
    <animator name="anm" started="false" attribute="x" to="30" duration="300" />
  </view>
  <view width="50" height="50" bgcolor="blue" onclick="this.anm.doStart();">
    <animator name="anm" started="false" attribute="x" to="30" duration="300" relative="true"/>
  </view>
</canvas>

リスト5 サンプル

animate()

<animator>のスクリプト版でanimate()というメソッドがあります。文法はanimate(属性名,to値,duration値,relative値)になります。リスト5と全く同じ動作をするコードをanimate()で書くとリスト6のようになります。

リスト6

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5" />
  <view width="50" height="50" bgcolor="red" onclick="this.animate('x',30,300,false);" />
  <view width="50" height="50" bgcolor="blue" onclick="this.animate('x',30,300,true);" />
</canvas>

リスト6 サンプル

著者プロフィール

ason(あそん)

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

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

コメント

コメントの記入