<animatorgrpup>
<animatorgrpup>を使うと,
リスト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"をつけると,
リスト8のサンプルの四角をそれぞれクリックしてみてください。xとy同時に変化させているので斜めに移動しますが,
リスト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は,
リスト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 サンプル