Tweenの基本
TweenServiceを使用することで、プロパティを使ったアニメーションが簡単に実現できます。
位置、サイズ、カラー、透明度などをアニメーションしたい場合に便利です。
- Workspace に 動かすPart を1つ追加します。
- そのPartをコピーし、名前をPartGoalにします。
- PartGoalの位置を変え、回転させ、サイズを変えます。
- PartGoalのCanCollideをOFFに、Transparencyを1にします。(しなくてもOK)
- Part、PartGoalともにAnchoredをONにします。
- Partに下記のScriptを追加します。
local TweenService = game:GetService("TweenService")
local part = game.Workspace.Part -- アニメーションするパーツ
local partGoal = game.Workspace.PartGoal -- 最終結果になるパーツ
local goal = { -- テーブルで指定(キーはプロパティ名)
CFrame = partGoal.CFrame, -- 位置と角度を変える
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.●●●
3. easingDirection
EasingStyleが実行される方向を指定します。
Enum.EasingDirection.●●● | 値 | |
In | 0 | アニメーションがゆっくり始まって、だんだん速くなる動き |
Out | 1 | アニメーションが速く始まって、だんだん遅くなる動き |
InOut | 2 | アニメーションの最初と最後がゆっくりで、中間が速い動き |
4. repeatCount
1回アニメーションを実行した後に、続けて繰り返される回数を指定します。
つまり、1と指定すると、2回アニメーションを再生します。
-1を指定すると、無限にアニメーションを再生するようになります。
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で接着します。
(RigidConstraint で接着可能な場合は、これを用いる方法がベストです)
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, cframe)
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 = cframe} )
tween.Completed:Connect(function(playbackState)
CFrameValue:Destroy()
end)
tween:Play()
end
「ModelをTweenで動かす場合(その2)」のところで関数ってどこに入れればいいんですか?
パーツとパーツを接続する関数になりますので、モデルをアニメーションする前に行う必要があります。
Tween Animationのような終了位置を直接指定できるアニメーションをつけたいのですが、アンカーをかけていなくても動くアニメーションってありますか?
アンカーに設定しないと、物理エンジンが機能し滑らかなアニメーションでなくなります。
アニメーション開始時にアンカーをONにし、終了時にOFFにするというのはどうでしょうか?
なるほど!参考になりました。ありがとうございます。