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の現代的な代替手段として、ストロークで説明されているように、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の現代的な代替手段として、ストロークで説明されているように、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プロパティをツイーニングすることで、スタイル遷移を通じてアニメーション化することもできます。これは、CSS遷移に類似しています。詳細については、スタイルエディタガイドを参照してください。

イージングオプション

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

スタイル

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

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

EasingDirectionが'In'のEasingStyleの変化のグラフ。

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")
 	-- 文字ごとのアニメーションがタグを壊さないようにリッチテキストタグを削除します
	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)