ユーザ用ツール

サイト用ツール


move機能

move機能

moveの使用方法

moveは表画面に表示した画像(背景も含む)を移動させる場合に使用します。移動には透明度、拡縮率、回転も含まれるので、使いようによってはいろいろな表現が可能になります。

書式

◆moveタグの属性

属性必須説明
layeryesレイヤー名対象となるレイヤを指定する baseも指定可能
pagenoback
fore(初期値)
both
対象レイヤを表か裏か
bothは表裏両方
※裏を指定する際はcavasタグでbackmove=true指定をする必要があります。
timeyesミリ秒pathで指定した点から点を移動するのに必要な時間を指定します。
pathで複数地点を設定した場合、通過する点間の区間の数×この属性の値の時間がかかります。
pathyes以下path属性の説明参照移動先位置の指定です。
・path内に記述する順番はpath=(①,②,③,④,⑤,⑥,⑦)となります。
①x座標
②y座標
③透明度
④全体の拡大縮小
⑤水平方向の拡縮
⑥垂直方向の拡縮
⑦回転角度
・複数地点を連続して指定することも出来ます。

path=(200,400,,)(300,400,,)(300,100,,)
countno整数移動の繰り返し回数を指定します。
pathで指定した最後の移動先まで移動したら、pathで指定した移動を再度繰り返します。上記例では(300,100)の次に
「move実行前の位置」→(200,400)→(300,400)…となります。
delaynoミリ秒move開始までの時間ミリ秒で指定する
初期値は0秒
withbacknotrue/
false(初期値)
裏レイヤにも反映させる/させない
intervalnoミリ秒countが1以上の時、次のcountに入るまでの待ち時間
groupno group属性についてはこちらを参照
easeno イージング処理を指定します。
liner:等速(初),
ease-in:ゆっくり開始,
ease-out:ゆっくり停止,
ease-in-out:ゆっくり開始しゆっくり停止

path属性の説明

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度回転します。

画像回転と画像基準値(orgx,orgy)の関係

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

ピョンピョン2回ジャンプする

@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タグだけでは移動しません。
move2gomove2タグで設定した移動を実行します。
wm2move2終了待ち

◆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

複数レイヤーの同時移動(その2)

複数のmoveを同時に実行後、特定のmoveに対してstopmoveやwmをしたい場合はstopmove/wmにlayer属性を付与します。stopmove/wm のlayer属性未指定の場合は実行中の全てのmoveが対象となります。
stopmove/wmに存在しないlayerを指定した場合、当該タグは無視されます。

move機能.txt · 最終更新: 2025/05/20 17:19 by yam