moveは表画面に表示した画像(背景も含む)を移動させる場合に使用します。移動には透明度、拡縮率、回転も含まれるので、使いようによってはいろいろな表現が可能になります。
◆moveタグの属性
| 属性 | 必須 | 値 | 説明 |
|---|---|---|---|
| layer | yes | レイヤー名 | 対象となるレイヤを指定する baseも指定可能 |
| page | no | back fore(初期値) both | 対象レイヤを表か裏か bothは表裏両方 ※裏を指定する際はcavasタグでbackmove=true指定をする必要があります。 |
| time | yes | ミリ秒 | pathで指定した点から点を移動するのに必要な時間を指定します。 pathで複数地点を設定した場合、通過する点間の区間の数×この属性の値の時間がかかります。 |
| path | yes | 以下path属性の説明参照 | 移動先位置の指定です。 ・path内に記述する順番はpath=(①,②,③,④,⑤,⑥,⑦)となります。 ①x座標 ②y座標 ③透明度 ④全体の拡大縮小 ⑤水平方向の拡縮 ⑥垂直方向の拡縮 ⑦回転角度 ・複数地点を連続して指定することも出来ます。 例 path=(200,400,,)(300,400,,)(300,100,,) |
| count | no | 整数 | 移動の繰り返し回数を指定します。 pathで指定した最後の移動先まで移動したら、pathで指定した移動を再度繰り返します。上記例では(300,100)の次に 「move実行前の位置」→(200,400)→(300,400)…となります。 |
| delay | no | ミリ秒 | move開始までの時間ミリ秒で指定する 初期値は0秒 |
| withback | no | true/ false(初期値) | 裏レイヤにも反映させる/させない |
| interval | no | ミリ秒 | countが1以上の時、次のcountに入るまでの待ち時間 |
| group | no | group属性についてはこちらを参照 | |
| ease | no | イージング処理を指定します。 liner:等速(初), ease-in:ゆっくり開始, ease-out:ゆっくり停止, ease-in-out:ゆっくり開始しゆっくり停止 |
path属性でX座標、Y座標、透明度、全体拡縮率、水平拡縮率、垂直拡縮率、回転の7つを指定します。
省略すると「変化なし」とみなします。X座標、Y座標は相対位置の指定もできます。
例: path=(200,400,,150)(,,,200)(add200,,)
| 属性 | 内容 |
|---|---|
| X座標 | 横方向の位置を指定します。(例:400、center) 相対位置を指定する場合、addもしくはsubを指定します。 |
| Y座標 | 縦方向の位置を指定します。(例:400) 相対位置を指定する場合、addもしくはsubを指定します。 例 add100 現在の位置から下方向に100px移動します。 sub100 現在の位置から上方向に100px移動します。 |
| 透明度 | 0~255の数字を指定します。 0が完全透明で、255が透明なしです。 移動中徐々に変化していきます。 |
| 全体拡大縮小率 | 0~の数字を百分率で指定します。 50で各辺が半分に、200で各辺が2倍になります。 100を指定すると元の大きさになります。 移動中徐々に変化していきます。 |
| 水平方向拡大縮小率 | 同上 |
| 垂直方向拡大縮小率 | 同上 |
| 回転角度 (2021/02 追加) | 画像の回転を度で指定します。(例:60、-120) 回転方向は時計回りになります(マイナス値は反時計回りになります)。 相対角度を指定する場合、addもしくはsubを指定します。 例 add100 現在の位置から時計回りに100度回転します。 sub100 現在の位置から反時計回りに100度回転します。 |
left,topを画面の中心にして角度を指定した場合
青枠が初期値(角度0度)、赤枠が角度-60度(マイナス60度)。
| orgx=left orgy=top | orgx=center orgy=center |
|---|---|
![]() | ![]() |
| orgx=left orgy=center | orgx=10 orgy=10(未実装) |
![]() | ![]() |
| @move layer=hoge path=(out_right,,0,) time=1000 @wm |
| @move layer=hoge path=(sub50,,,) time=500 @wm |
| @image layer=hoge0 storage=hoge z=0 top=300 left=400 @move layer=hoge0 path=(0,0,,100) time=1000 @wm |
| @move layer=hoge path=(,,0,50) time=1000 @wm |
| @move layer=hoge path=(,sub50,,)(,add50,,) time=100 count=2 @wm |
| @image layer=hoge storage=aaa z=200 top=-300 left=-400 opacity=0 @move layer=hoge0 path=(0,0,255,100) time=1000 @wm |
複数レイヤーを同時に移動させる際、moveを複数行並べてもそれなりに動きますが、レイヤー間に若干のタイムラグが出る可能性が残ります。複数レイヤーの同時移動で厳密に同期を取る場合はmove2を使用します。
◆使用するタグ
| タグ | 内容 |
|---|---|
| move2 | 移動するレイヤーの移動先指定です。moveと異なり、move2タグだけでは移動しません。 |
| move2go | move2タグで設定した移動を実行します。 |
| wm2 | move2終了待ち |
◆move2タグの属性
こちらを参照ください参照
◆move2goタグの属性
こちらを参照ください参照
◆使用例
| [image layer=hoge0 page=fore storage="test0" visible=true orgx=c left=0 top=0] [image layer=hoge1 page=fore storage="test1" visible=true orgx=c left=0 top=0] @move2 layer=hoge0 path=(add800,sub100,,) time=1000 @move2 layer=hoge1 path=(800,sub100,50,) time=2000 @move2go @wm2 canskip=true [image layer=hoge0 page=fore storage="test0" visible=true orgx=c left=0 top=0] [image layer=hoge1 page=fore storage="test1" visible=true orgx=c left=0 top=0] @move2 layer=hoge0 path=(add800,sub100,,)(c,add50,,) time=500 @move2 layer=hoge1 path=(800,sub100,,)(400,sub100,,)(800,add200,,) time=250 @move2go delay=2000 count=3 @wm2 canskip=true |
複数のmoveを同時に実行後、特定のmoveに対してstopmoveやwmをしたい場合はstopmove/wmにlayer属性を付与します。stopmove/wm のlayer属性未指定の場合は実行中の全てのmoveが対象となります。
stopmove/wmに存在しないlayerを指定した場合、当該タグは無視されます。