今回はRIA
<animator>
何を
属性 | 内容 |
---|---|
attribute | 変化させたい属性の名前。x、 |
from | 開始値。デフォルトは現在の属性値。 |
to | 終了値。 |
duration | アニメーションさせる時間。単位はミリ秒。 |
started | アニメーションを自動開始するかどうか。デフォルトはtrueで自動開始。falseの場合は手動開始。 |
motion | アニメーションの加速、 |
relative | toで指定した値が初期値に対して相対的 |
repeat | 繰り返し数。repeat="Infinity"とすると永久に繰り返す。 |
アニメーションの開始、
メソッド | 内容 |
---|---|
doStart() | アニメーションを開始する。 |
pause() | アニメーションの一時停止あるいは再開。 |
stop() | アニメーションの停止。 |
基本セット(attribute,from,to,duration)と起動セット(started、doStart())
まずは<animator>の基本セットから。リスト1は赤い四角を表す<view>の中に<animator>を入れ子にしています。<animator>はデフォルトでは親タグに対して作用します。<animator>自身は画面に表示されませんがタグ自身が階層構造を持っているので、
タグの記述位置などは前回記事で紹介した<handler>や<method>と使い方は似ていますが、
リスト1を細かく解説すると、
started=falseなのでアプリ起動時には自動開始されず、
<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"でしたが、
<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、
<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では、
<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の位置に移動
<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のようになります。
<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 サンプル
<animatorgrpup>
<animatorgrpup>を使うと、
リスト7のように<animatorgroup>の中に<animator>を入れていきます。デフォルトでは上から順番に実行されていきます。サンプルの赤四角をクリックしてみてください。
<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同時に変化させているので斜めに移動しますが、
<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属性も変更すると簡単に面白い動きをさせることができます。
<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は、
<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 サンプル
応用編
x,y以外での使用例を紹介します。
透明度を変化
透明度はopacity属性で指定します。値は0~1です。0が完全透明、
<canvas proxied="false" bgcolor="0xffffcc">
<view width="50" height="50" bgcolor="red" onclick="this.anm.doStart();">
<animatorgroup name="anm" started="false" repeat="2" >
<animator attribute="opacity" to="0" duration="1000" />
<animator attribute="opacity" to="1" duration="1000" />
</animatorgroup>
</view>
</canvas>
リスト11 サンプル
幅、高さの変化
width
<canvas proxied="false" bgcolor="0xffffcc">
<button>Open
<handler name="onclick">
if(v.width==0){
anm1.doStart();
this.setAttribute('text',"Close");
}else{
anm2.doStart();
this.setAttribute('text',"Open");
}
</handler>
</button>
<view id="v" y="30" width="0" height="0" bgcolor="red">
<animatorgroup id="anm1" started="false" process="simultaneous" duration="500" >
<animator attribute="width" to="200" />
<animator attribute="height" to="150" />
<animator attribute="opacity" to="1" />
</animatorgroup>
<animatorgroup id="anm2" started="false" process="simultaneous" duration="500" >
<animator attribute="width" to="0" />
<animator attribute="height" to="0" />
<animator attribute="opacity" to="0" />
</animatorgroup>
</view>
</canvas>
リスト12 サンプル
回転
回転はrotation属性を使います。rotationでは角度を指定しますので、
リスト13は赤四角をクリックすると回転しますが、
<canvas proxied="false" bgcolor="0xffffcc">
<view align="center" valign="middle" width="50" height="50" bgcolor="0xff0000" onclick="this.anm.doStart()">
<animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
</view>
</canvas>
リスト13 サンプル
リスト14は赤四角をクリックすると回転しますが、
<canvas proxied="false" bgcolor="0xffffcc">
<view align="center" valign="middle" xoffset="${this.width/2}" yoffset="${this.height/2}" width="50" height="50" bgcolor="0xff0000" onclick="this.anm.doStart()">
<animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
</view>
</canvas>
リスト14 サンプル
リスト15はリスト13と14をくっつけてそれぞれの回転軸の違いがわかるようにしました。グレー四角をクリックするとそれだけが、
赤四角が回転するとrotation値が変化しますが、
<canvas proxied="false" bgcolor="0xffffcc">
<view align="center" valign="middle" xoffset="${this.width/2}" yoffset="${this.height/2}" width="50" height="50" bgcolor="gray" onclick="this.anm.doStart()" rotation="${v.rotation}" >
<animator name="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
</view>
<view id="v" align="center" valign="middle" width="50" height="50" bgcolor="red" onclick="anm.doStart()">
<animator id="anm" attribute="rotation" from="0" to="360" duration="1000" started="false" />
</view>
</canvas>
リスト15 サンプル
円運動
三角関数を使った値の変化を利用するといろんな円運動をさせることができます。高度な技ですが面白いので紹介します。<attribute>というタグを使うと独自の属性
<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は心電図みたいな動きをするサンプルです。
<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は楕円運動です。
<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っぽい奥行き感のある楕円運動です。
<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属性も数値なのでアニメーション変化させることができます。
<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属性も数値なのでアニメーション変化させることができます。
<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属性も数値ですが、
リスト22のサンプルはTestボタンを押すと四角の色がランダムに変わっていきます。
<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 サンプル
まとめ
アニメーション効果は楽しいですが、