Tweenアニメーション

逆引きリファレンス コメントを残す

Tweenの基本

TweenServiceを使用することで、プロパティを使ったアニメーションが簡単に実現できます。
位置、サイズ、カラー、透明度などをアニメーションしたい場合に便利です。

  1. Workspace に 動かすPart を１つ追加します。
  2. そのPartをコピーし、名前をPartGoalにします。
  3. PartGoalの位置を変え、回転させ、サイズを変えます。
  4. PartGoalのCanCollideをOFFに、Transparencyを１にします。（しなくてもOK）
  5. Part、PartGoalともにAnchoredをONにします。
  6. Partに下記のScriptを追加します。
local TweenService = game:GetService("TweenService")

local part = game.Workspace.Part		-- アニメーションするパーツ
local partGoal = game.Workspace.PartGoal	-- 最終結果になるパーツ

local goal = {}		-- 配列を作成
goal.CFrame = partGoal.CFrame	-- 位置と角度を変える
goal.Size = partGoal.Size	-- 大きさを変える

local tweenInfo = TweenInfo.new(3)	-- 3秒アニメーション
local tween = TweenService:Create(part, tweenInfo, goal)

-- アニメーションが終了した後に呼ばれるイベントの設定
tween.Completed:Connect(function(playbackState)
	print("tween1: "..tostring(playbackState))
end)

tween:Play()  -- Tweenアニメーション実行

tween:Play() の後に、
tween.Completed:wait() とすることにより、アニメーションが終了するまで待つことができます。

Createのパラメータ

  • アニメーションするPart（Modelは指定不可）
  • TweenInfo（下記参照）
  • 変化させるプロパティの配列（アニメーションできなものは指定不可）

TweenInfo

アニメーションの動作内容を指定します。
再生時間やスタイル、再生回数、反復動作など、６個の項目が指定できます。下記の値がデフォルトです。

TweenInfo.new (
　　　number time = 1.0 , 
　　　Enum easingStyle = Enum.EasingStyle.Quad ,
　　　Enum easingDirection = Enum.EasingDirection.Out ,
　　　number repeatCount = 0 ,
　　　bool reverses = false ,
　　　number delayTime = 0 )

1.time

スタートからゴールするまでのアニメーション再生時間（秒）を指定します。

2.easingStyle

アニメーションのスタイルを設定します。

3.easingDirection

EasingStyleが実行される方向を指定します。

Enum.EasingDirection.●●●値
In0順方向に適用されます
Out1逆方向に適用されます
InOut2前半は順方向に、後半は逆方向に適用されます

4.repeatCount

１回アニメーションを実行した後に、続けて繰り返される回数を指定します。
つまり、１と指定すると、２回アニメーションを再生します。
-1を指定すると、無限にアニメーションを再生するようになります。

5.reverses

アニメーションを再生した後に、逆再生するかどうかを指定します。trueで逆再生します。

6.delayTime

アニメーションの再生を開始するまでの待ち時間を指定します。

ModelをTweenで動かす場合（その１）

TweenできるものはPartだけです。しかし移動だけならばModelも使用できます。

  • ModelのPrimaryPartに、代表的なPartを指定します。（このPartをTweenで指定）
  • PartのAnchoredをすべてOFFにします。（PrimaryPartのPartはONでも可能）
  • すべてのPartをPrimaryPartで指定したPartにWeldConstraintで接着します。

ModelをTweenで動かす場合（その２）

  • Model内のPartのAnchoredをすべてONにします。
  • Modelを囲むようにPartを作成します。これをModelのPrimaryPartに設定します。
  • PrimaryPartのPartのTransparencyを１にします。（完全な透明）
  • 下記の関数にModelを渡して呼びます。
  • PrimaryPartのPartをCFrameでTweenすればOKです。
function setWeld(model)
	local Part1 = model.PrimaryPart

	for _, Part0 in pairs(model:GetDescendants()) do
		if Part0:IsA("BasePart") and not (Part0 == Part1) then
			local WeldConstraint = Instance.new("WeldConstraint")
			WeldConstraint.Part0 = Part0
			WeldConstraint.Part1 = Part1	-- 全てPrimaryPartに繋げる
			WeldConstraint.Parent = WeldConstraint.Part0
			Part0.Anchored = false
		end
	end
	Part1.Anchored = true
	Part1.CanCollide = false
end

ModelをTweenで動かす場合（その３）

原因は分かりませんが、その２の方法でもPrimryPartしかアニメーションされないことがあるようです。そのような場合、下記のような関数を使うと動作するかもしれませんのでお試しください。

local function tweenModel(info, model, cf)
	local CFrameValue = Instance.new("CFrameValue")
	CFrameValue.Value = model:GetPrimaryPartCFrame()

	CFrameValue:GetPropertyChangedSignal("Value"):Connect(function()
		model:SetPrimaryPartCFrame(CFrameValue.Value)
	end)

	local tween = TweenService:Create(CFrameValue, info, {Value = cf} )
	tween.Completed:Connect(function(playbackState)
		CFrameValue:Destroy()
	end)
	tween:Play()
end

返信を残す