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 = {  -- テーブルで指定(キーはプロパティ名)
    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.●●●
In0アニメーションがゆっくり始まって、だんだん速くなる動き
Out1アニメーションが速く始まって、だんだん遅くなる動き
InOut2アニメーションの最初と最後がゆっくりで、中間が速い動き

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

By schilverberch

ROBLOXでゲームを作ろう! 一緒にプログラミングを学びましょう。

5 thoughts on “Tweenアニメーション”
  1. Tween Animationのような終了位置を直接指定できるアニメーションをつけたいのですが、アンカーをかけていなくても動くアニメーションってありますか?

コメントを残す コメントをキャンセル

モバイルバージョンを終了