Tweenアニメーション

Tweenの基本

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

  1. Workspace に 動かすPart を1つ追加します。
  2. そのPartをコピーし、名前をPartGoalにします。
  3. PartGoalの位置を変え、回転させ、サイズを変えます。
  4. PartGoalのCanCollideをOFFに、Transparencyを1にします。(しなくても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

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

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

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

Enum.EasingStyle.●●●
Linear0一定の速度で移動します
Sine1速度は正弦波によって決定されます
Back2わずかにオーバーシュートしてから、元の位置に戻ります
Quad3終わりに近づくにつれて減速します
Quart4Quadに似ていますが、より高速で開始します
Quint5Quartに似ていますが、より高速で開始します
Bounce6終了位置に達した後、最終的に落ち着く前に、何度も後方に跳ね返ります
Elastic7GUI要素が輪ゴムに取り付けられているかのように動き、ターゲットを数回オーバーシュートします
Exponential8それが終わりに近づくにつれて、非常に速く減速します
Circular9円弧をたどり、終わりに近づくにつれて減速します
Cubic10Quadに似ていますが、低速で開始します
https://developer.roblox.com/en-us/api-reference/enum/EasingStyle

3.easingDirection

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

Enum.EasingDirection.●●●
In0順方向に適用されます
Out1逆方向に適用されます
InOut2前半は順方向に、後半は逆方向に適用されます
https://developer.roblox.com/en-us/api-reference/enum/EasingDirection

4.repeatCount

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

5.reverses

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

6.delayTime

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

ModelをTweenで動かす場合(その1)

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

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

ModelをTweenで動かす場合(その2)

  • Model内のPartのAnchoredをすべてONにします。
  • Modelを囲むようにPartを作成します。これをModelのPrimaryPartに設定します。
  • PrimaryPartのPartのTransparencyを1にします。(完全な透明)
  • 下記の関数に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で動かす場合(その3)

原因は分かりませんが、その2の方法でも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

返信を残す