今回はRIA
<animator>
何を
表1 <animator>の主な属性
| 属性 | 内容 |
|---|---|
| attribute | 変化させたい属性の名前。x， |
| from | 開始値。デフォルトは現在の属性値。 |
| to | 終了値。 |
| duration | アニメーションさせる時間。単位はミリ秒。 |
| started | アニメーションを自動開始するかどうか。デフォルトはtrueで自動開始。falseの場合は手動開始。 |
| motion | アニメーションの加速， |
| relative | toで指定した値が初期値に対して相対的 |
| repeat | 繰り返し数。repeat="Infinity"とすると永久に繰り返す。 |
アニメーションの開始，
表2 <animator>の主なメソッド
| メソッド | 内容 |
|---|---|
| doStart() | アニメーションを開始する。 |
| pause() | アニメーションの一時停止あるいは再開。 |
| stop() | アニメーションの停止。 |
基本セット
まずは<animator>の基本セットから。リスト1は赤い四角を表す<view>の中に<animator>を入れ子にしています。<animator>はデフォルトでは親タグに対して作用します。<animator>自身は画面に表示されませんがタグ自身が階層構造を持っているので，
タグの記述位置などは前回記事で紹介した<handler>や<method>と使い方は似ていますが，
リスト1を細かく解説すると，
started=falseなのでアプリ起動時には自動開始されず，
リスト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"でしたが，
リスト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，
リスト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属性はアニメーションの加速，
- linear
（一定速度） - easein
（開始時に加速） - easeout
（終了時に減速） - easeboth
（開始時に加速， 終了時に減速） …デフォルト
リスト4では，
リスト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では，
何のことかというと，
リスト5のサンプルの赤四角と青四角はrelativeがfalseかtrueの違いだけです。赤四角はクリックごとに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 サンプル