UIアニメーション/ツイーン | 文書 - Roblox クリエーターハブ

アニメーションにおいて、ツイーニングは、シーケンス内の2つのキーポイント間に中間フレームを生成するプロセスです。ユーザーインターフェースを設計する際に、ツイーニングを使用してGuiObjectをある状態から別の状態にスムーズに移行させることができます。例えば：

ユーザーがボタンを選択したときに、そのサイズをスムーズに増加させる。
UIメニューを画面の端からスライドさせて出現させる。
ユーザーがヘルスブーストを受けたときに、ヘルスバーを2つの幅の間を徐々にアニメーションさせる。

単一プロパティのツイーン

位置

GuiObjectの位置をツイーニングするには：

オブジェクトのAnchorPointを設定します。
オブジェクトのターゲット位置のUDim2座標を決定し、オブジェクトが画面の中心に正確にツイーニングされるために、厳密なピクセル値の代わりにUDim2のスケールパラメータを使用します。
TweenInfoとターゲット位置をTweenService:Create()に渡します。
Tween:Play()でツイーンを再生します。

次のコードスニペットは、ScreenGui内のImageLabelを画面の正確な中心に移動させます：

UI Tween - Position
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local targetPosition = UDim2.new(0.5, 0, 0.5, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Position = targetPosition})

tween:Play()

サイズ

GuiObjectのサイズをツイーニングするには：

オブジェクトのターゲットサイズのUDim2座標を決定し、オブジェクトが画面サイズの相対的なパーセンテージにツイーニングされるように、厳密なピクセル値の代わりにUDim2のスケールパラメータを使用します。
オブジェクトの設計されたアスペクト比を維持するために、UIAspectRatioConstraintをオブジェクトに添付します。
TweenInfoとターゲットサイズをTweenService:Create()に渡します。
Tween:Play()でツイーンを再生します。

次のコードスニペットは、ScreenGui内のImageLabelを画面の幅または高さの40%（小さい方）に、オブジェクトの中心アンカーポイントからスケールします：

UI Tween - Size
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local aspectRatioConstraint = Instance.new("UIAspectRatioConstraint")
aspectRatioConstraint.Parent = object

local targetSize = UDim2.new(0.4, 0, 0.4, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Size = targetSize})

tween:Play()

回転

GuiObjectの回転をツイーニングするには：

回転させるオブジェクトのAnchorPointを設定します。
オブジェクトのターゲットRotationを決定します。
TweenInfoとターゲット回転をTweenService:Create()に渡します。
Tween:Play()でツイーンを再生します。

UI Tween - Size
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local targetRotation = 45

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})

tween:Play()

透明度

複数のプロパティがUIの透明度を制御し、オブジェクトのタイプによって異なります。これらのプロパティを個別にツイーニングしたり、マルチプロパティツイーンを通じて組み合わせたツイーニングを行ったりできます。あるいは、オブジェクトをCanvasGroupの内部に配置し、グループのGroupTransparencyをツイーニングすることで、オブジェクト全体の透明度をツイーニングすることもできます。

UIオブジェクト	プロパティ
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

TextLabel.TextStrokeTransparencyとTextButton.TextStrokeTransparencyの現代の代替として、Strokeに概説されているように、UIStrokeオブジェクトのストローク透明度をツイーニングできます。

UI Tween - Image Transparency
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

local targetTransparency = 0.8

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {ImageTransparency = targetTransparency})

tween:Play()

UI Tween - Canvas Group Transparency
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local canvasGroup = ScreenGui:WaitForChild("CanvasGroup")

local targetTransparency = 0.8

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupTransparency = targetTransparency})

tween:Play()

色

複数のプロパティがUIの色を制御し、オブジェクトのタイプによって異なります。これらのプロパティを個別にツイーニングしたり、マルチプロパティツイーンを通じて組み合わせたツイーニングを行ったりできます。あるいは、オブジェクトをCanvasGroupの内部に配置し、グループのGroupColor3をツイーニングすることで、オブジェクト全体の色をツイーニングすることもできます。

UIオブジェクト	プロパティ
Frame	BackgroundColor3, BorderColor3
TextLabel	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButton	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabel	BackgroundColor3, BorderColor3, ImageColor3
ImageButton	BackgroundColor3, BorderColor3, ImageColor3

GuiObject.BorderColor3、TextLabel.TextStrokeColor3、およびTextButton.TextStrokeColor3の現代の代替として、Strokeに概説されているように、UIStrokeオブジェクトのストローク色をツイーニングできます。

UI Tween - Image Color
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

local targetColor = Color3.fromRGB(255, 0, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {ImageColor3 = targetColor})

tween:Play()

UI Tween - Canvas Group Color
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local canvasGroup = ScreenGui:WaitForChild("CanvasGroup")

local targetColor = Color3.fromRGB(255, 0, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupColor3 = targetColor})

tween:Play()

ストローク

複数のプロパティがUIの境界線を制御し、オブジェクトのタイプによって異なります。

UIオブジェクト	プロパティ
Frame	BorderSizePixel, BorderColor3
TextLabel	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButton	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabel	BorderSizePixel, BorderColor3
ImageButton	BorderSizePixel, BorderColor3

また、UIStrokeの子を適用し、その厚さ、色、または透明度をツイーニングすることもできます。

UIオブジェクト	プロパティ
UIStroke	Color, Thickness, Transparency

UI Tween - UIStroke Color & Thickness
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("TextLabel")

local stroke = Instance.new("UIStroke")
stroke.Color = Color3.fromRGB(255, 255, 255)
stroke.Thickness = 5
stroke.Parent = object

local targetColor = Color3.fromRGB(255, 0, 0)
local targetThickness = 10

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(stroke, tweenInfo, {Color = targetColor, Thickness = targetThickness})

tween:Play()

マルチプロパティツイーン

任意の単一プロパティのツイーンを、TweenService:Create()に複数のターゲットプロパティを渡して、より複雑なツイーンに組み合わせることができます。例えば、位置 + 回転やサイズ + 透明度などがあります。

UI Tween - Position & Rotation
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local targetPosition = UDim2.new(0.5, 0, 0.5, 0)
local targetRotation = 45

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Position = targetPosition, Rotation = targetRotation})

tween:Play()

UI Tween - Size & Transparency
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local aspectRatioConstraint = Instance.new("UIAspectRatioConstraint")
aspectRatioConstraint.Parent = object

local targetSize = UDim2.new(0.4, 0, 0.4, 0)
local targetTransparency = 0.8

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Size = targetSize, ImageTransparency = targetTransparency})

tween:Play()

ツイーンシーケンス

UIアニメーションを連鎖させて、前のツイーンのCompletedイベントの後に次のツイーンを再生することができます。例えば、次のスクリプトはオブジェクトを画面の中心に移動させ、その後45度回転させます。

UI Tween Sequence
local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui")
local object = ScreenGui:WaitForChild("ImageLabel")

object.AnchorPoint = Vector2.new(0.5, 0.5)

local targetPosition = UDim2.new(0.5, 0, 0.5, 0)
local targetRotation = 45

local tweenInfo = TweenInfo.new(2)
local positionTween = TweenService:Create(object, tweenInfo, {Position = targetPosition})
local rotationTween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})

-- 最初に位置のツイーンを再生します
positionTween:Play()

-- 位置のツイーンの完了後に回転のツイーンを再生します
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

スタイル遷移

この機能は現在ベータ版です。ファイル ⟩ ベータ機能 ⟩ スタイリング遷移で有効にしてください。

UIオブジェクトは、StyleRule定義を通じて1つ以上のUIプロパティがツイーニングされるスタイル遷移を通じてアニメーション化することもできます。詳細については、スタイルエディタガイドを参照してください。

イージングオプション

TweenInfoのイージングオプションを使用すると、UIアニメーションのイージングスタイルと方向を制御できます。

スタイル

Enum.EasingStyleは、開始から終了までの補間の速度を設定します。デフォルトでは、イージングスタイルはEnum.EasingStyle.Quadに設定されています。

スタイル	説明
線形	一定の速度で移動します。
サイン	速度はサイン波によって決定され、穏やかなイージングモーションとなります。
二次	サインに似ていますが、二次補間に基づくやや鋭いカーブです。
三次	二次に似ていますが、三次補間に基づくやや鋭いカーブです。
四次	三次に似ていますが、四次補間に基づくさらに鋭いカーブです。
五次	四次に似ていますが、五次補間に基づくさらに鋭いカーブです。
指数	指数補間に基づく最も鋭いカーブです。
円形	円の弧に従い、加速がより急で減速がより緩やかです（五次や指数に比べて）。
バック	目標を少しオーバーシュートし、その後元に戻ります。
バウンス	目標に到達した後に複数回後ろに跳ね返り、最終的に落ち着きます。
エラスティック	ゴムバンドに取り付けられているかのように動き、目標を何度もオーバーシュートします。

Easing Style - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

方向

Enum.EasingDirectionは、イージングスタイルの補間がオブジェクトに適用される方法を定義し、デフォルトはOutです。線形イージングスタイルのツイーンは影響を受けないことに注意してください。線形補間は開始から終了まで一定です。

方向	説明
In	イージングスタイルが前の方向に適用されます。
Out	イージングスタイルが逆の方向に適用されます。
InOut	イージングスタイルが最初の半分に前、次の半分に逆に適用されます。

Easing direction - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

テキストのタイムライター効果

テキストベースのUI、例えばカットシーンのバナー、プレイヤーの指示、プロンプトなどを、アニメーション効果で簡単に強化できます。"タイムライター"効果は、ストーリーを語ったり、NPCの会話を出力したりするTextLabelsに最適です。

ReplicatedStorage内に新しいModuleScriptを作成します。
新しいスクリプトの名前をAnimateUIに変更します。

スクリプトに次のコードを貼り付けます：

ModuleScript - AnimateUI
local LocalizationService = game:GetService("LocalizationService")
local Players = game:GetService("Players")

local SOURCE_LOCALE = "en"
local translator = nil

local AnimateUI = {}

function AnimateUI.loadTranslator()
	pcall(function()
		translator = LocalizationService:GetTranslatorForPlayerAsync(Players.LocalPlayer)
	end)
	if not translator then
		pcall(function()
			translator = LocalizationService:GetTranslatorForLocaleAsync(SOURCE_LOCALE)
		end)
	end
end

function AnimateUI.typeWrite(guiObject, text, delayBetweenChars)
	guiObject.Visible = true
	guiObject.AutoLocalize = false
	local displayText = text

	-- 可能であればテキストを翻訳します
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- グラフェムループがこれらの文字を見逃さないように行間のタグを置き換えます
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- 1文字ずつのアニメーションがタグを壊さないようにリッチテキストタグを削除します
	displayText = displayText:gsub("<[^<>]->", "")

	-- 翻訳された/修正されたテキストを親に設定します
	guiObject.Text = displayText

	local index = 0
	for first, last in utf8.graphemes(displayText) do
		index += 1
		guiObject.MaxVisibleGraphemes = index
		task.wait(delayBetweenChars)
	end
end

return AnimateUI

あなたの体験のソース言語が英語でない場合（"en"）、SOURCE_LOCALEのロケールコードを体験のローカリゼーション設定に合わせて変更してください。

TextLabelを適切な場所に作成します（例えば、StarterGuiに親付けされたScreenGuiの内部など）。

ラベルの直接の子として新しいLocalScriptを挿入し、次のコードを貼り付けます。各メッセージは、親オブジェクト、出力する文字列、文字間の遅延のパラメータを持ってAnimateUI.typeWrite()を呼び出すことで出力されます。

LocalScript
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))

local label = script.Parent

-- 経験がローカライズされている場合は翻訳者をロードします
--AnimateUI.loadTranslator()

local message1 = [[この扉の向こうには<br /><font size="46" color="rgb(255,50,25)">偉大なるゾーゴスが...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...このダンジョンを<font color="rgb(255,200,50)">無挑戦で支配しています！</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)