高度なオブジェクトの移動（回転とか）

　描画オブジェクトの移動方法についてです。今回は少し手の込んだ移動（回転など）を行いたい場合の方法です。

基本的な考え方は「オブジェクトの移動」と同様です。
キャンセル・一時停止・再開はこちらを参照してください。
移動関係の各種イベントはこちらを参照してください。

　リファレンスを見ると関数と引数は以下の通りです。

transition.to(target, params)：現在描画している位置から引数で指定した位置へ移動
transition.from(target, params)：引数で指定した位置から現在描画している位置へ移動

引数名	説明
target	移動させる対象
params	パラメータ

パラメータ
注：パラメータはすべてオプションなので、設定しなくても動作します。

名前	説明
プロパティ	描画オブジェクトのプロパティ
time	移動が完了するまでの時間（ミリ秒）
iterations	繰り返し回数
tag	識別用の名前（キャンセルや一時停止などで使用可能）
transition	移動の仕方（なだらかに加速など）（easingライブラリを指定）
delay	指定時間後に移動を開始（ミリ秒）
delta	よくわかりません・・・が、動きの違いは座標の原点を今ある位置とするか、絶対座標系の原点にするか、といった感じです
onStart	移動が開始した際に呼び出す関数を指定
onComplete	移動が完了した際に呼び出す関数を指定
onPause	移動が一時停止した際に呼び出す関数を指定
onResume	移動が再開した際に呼び出す関数を指定
onCancel	移動をキャンセルした際に呼び出す関数を指定
onRepeat	移動が完了し繰り返し実行する際に呼び出す関数を指定

　transition.to()およびtransition.from()の場合、描画オブジェクトのプロパティを利用することができます。基本的な使い方は「オブジェクトの移動」と同様です。

　描画オブジェクトにある「rotation」を使用すると移動時に、回転を同時に行うことができます。以下のプログラムを実行すると、(100, 100)に描画されている赤い四角形が、(200, 200)へ180度回転しながら移動します。

local obj1 = display.newRect(100, 100, 30, 30)
obj1:setFillColor(1, 0, 0, 1)

local transitionTable = {
x = 200,
y = 200,
rotation = 180,
time = 1000,
}
local retTransition = transition.to(obj1, transitionTable)

　描画オブジェクトにある「alpha」を使用すると移動時に、透過度の変更を同時に行うことができます。以下のプログラムを実行すると、(100, 100)に描画されている赤い四角形が、(200, 200)へ透明になりながら移動します。

local obj1 = display.newRect(100, 100, 30, 30)
obj1:setFillColor(1, 0, 0, 1)

local transitionTable = {
x = 200,
y = 200,
alpha = 0,
time = 1000,
}
local retTransition = transition.to(obj1, transitionTable)

　回転する場合、アンカーポイントをどこに設定しているかにより、回転の仕方が変わるので注意してください。

　他にもサイズを変更など様々なことができます。色々と試して確認してみてください。

版	更新日	Corona SDKのバージョン
新規作成	2015年9月11日	v2015.2646

前へメニューへ次へ

DIYのホームページ