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

アニメーションでは、トリミングは、2つのキーポイント間のインターミディエトフレームを生成するプロセスです。ユーザーインターフェイスを設計するときは、トリミングを使用して、GuiObject をスムーズに 1つの状態から別の状態に移行できます。たとえば：

ユーザーがボタンを選択すると、ボタンのサイズをスムーズに増加させます。
画面の端にスクリーン UI メニューをスライドする。
ユーザーが健康ブーストを受信すると、幅の 2 つの間のグラデーションアニメーションを使用して、健康バーをグレードループさせます。

1つのプロパティのツインズ

ポジション

Class.GuiObject の GuiObject をツイーンするには：

オブジェクトの AnchorPoint を設定します。
オブジェクトのターゲットポジションの UDim2 座標を決定するには、Datatype.UDim2 のスケールパラメートルを使用して、オブジェクトのツイーンを画面の正中央に移動させることで、オブジェクトの UDim2 の位置を決定します。
パス a TweenInfo とターゲットポジションを TweenService:Create() に。
Play クラスの Tween をプレイする。

次のコードスナップは、ImageLabel を ScreenGui の正中央に移動させます：

UI ツイーン - ポジション
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()

サイズ

Class.GuiObject のサイズを変更するには：

オブジェクトのターゲットサイズに UDim2 のコーディショナルパラメーターを使用して、Datatype.UDim2 のスケールパラメーターでオブジェクトのターゲットサイズを決定します。
Class.UIAspectRatioConstraint をオブジェクトに取り付けて、Class.UIAspectRatio のデザインされたアスペクト比率を維持します。
パス a TweenInfo とターゲットサイズを TweenService:Create() に。
Play クラスの Tween をプレイする。

次のコードスナップは、ImageLabel をオブジェクトの中心アンカーポイントからScreenGui の 40% のスクリーン幅または高さにスケールします。

UI ツイーン - サイズ
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()

回転

Class.GuiObject の GuiObject をツイーンするには：

オブジェクトの回転中に AnchorPoint を設定します。
オブジェクトのターゲット Rotation を決定します。
パス a TweenInfo とターゲットの回転を TweenService:Create() に。
Play クラスの Tween をプレイする。

UI ツイーン - サイズ
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 の透明度を設定できます。各プロパティを個別にまたは Class.CanvasGroup を通じて減速することもできます。また、グループ内の Class.CanvasGroup を置き、グループの Class.CanvasGroup.GroupTransparency|GroupTransparency を減速することも

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

現代の TextLabel.TextStrokeTransparency と TextButton.TextStrokeTransparency の代替として、UIStroke オブジェクトのストロークの透明度を減少させることができます。これは 2>Stroke2> で説明されています。

UI Tween - 画像透明度
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 - キャンバスグループの透明度
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コントロールの色を変更できます。各プロパティを個別にまたは Class.CanvasGroup を通じて潜在的に減少することができます。また、Class.CanvasGroup.GroupColor3|GroupColor3 をグループ内に配置し、Class.CanvasGroup.GroupColor3|

UI オブジェクト	プロパティ
Frame	BackgroundColor3、BorderColor3
TextLabel	BackgroundColor3、BorderColor3、TextColor3、0> Class.TextLabel.TextStrokeColor3\|TextStrokeColor30>
TextButton	BackgroundColor3、BorderColor3、TextColor3、0> Class.TextButton.TextStrokeColor3\|TextStrokeColor30>
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

現代の代替案として GuiObject.BorderColor3 、 TextLabel.TextStrokeColor3 、および TextButton.TextStrokeColor3 、あなたはストロークの色を 1>Stroke1> オブジェクトに斜めに設定できます。

UI Tween - 画像の色
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 - キャンバスグループカラー
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 , 0> Class.TextLabel.TextStrokeTransparency\|TextStrokeTransparency0>
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextButton.TextStrokeTransparencyTransparency0>
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

あるいは、UIStroke 子を適用し、そのサイズ、色、および/または透明度を変更できます。

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

UI Tween - UIStroke の色と厚さ
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()

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

Class.TweenService:Create() に複数のターゲットプロパティを渡すことで、TweenService:Create()および回転または1>サイズ1> といったより複雑なツイーンを作成できます。

UI Tween - ポジションと回転
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 - サイズと透明度
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()

ツイーンシーケンス

ユーザーインターフェイスのアニメーションを連続して実行するには、以前の твиーンの Completed イベントで次のツイーンをプレイすることです。たとえば、次のスクリプトは、オブジェクトを画面の中央に移動させ、その後、45°回転します。

UI ツイーンシーケンス
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)

オプションの緩和

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

スタイル

Enum.EasingStyle は、開始から終了までのインタープレーション率を設定します。デフォルトでは、インタープレーションスタイルは Enum.EasingStyle.Quad に設定されています。

スタイル	説明
直線状態	定速で移動します。
サイン	速度は、柔らかい穏やかな動きのためのサインウェーブによって決まります。
クワッドルームミラー	Sine と似ていますが、正方形のインターポリエーションに基づく少し鋭いカーブです。
キュービック	同様に Quad ですが、キュービックインターポリエーションに基づく少し鋭くなった曲線を持つ。
4分の	Cubic と似ていますが、より鋭くなった曲線を基にしています。
クイント	Quart と同様ですが、Quintic インタープラントに基づくより鋭いカーブです。
凸状	凸状数の乗数を使用した最も鋭いカーブ。
円形	円形のアーチをたどり、加速度が Quint または Exponential よりも急激であり、減速度が Quint または 1>Exponential1> よりもゆっくりです。
戻る	ターゲットを若干オーバーシュートし、プレースの後戻ります。
バウンス	ターゲットに到達した後、最終的に設定するまでに複数回バウンスします。
エラスティック	ゴムバンドに接続されているかのように動き、ターゲットを複数回オーバーシュートします。

Graphs of EasingStyle variations with an 'In' EasingDirection.

穏やかなスタイル - キュービック
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

方向

Enum.EasingDirection は、イージングスタイルのインターポリエーションがオブジェクトに適用される方法を定義します。デフォルトは Out です。減速スタイルのインターポリエーションは、0>ライン0> の減速スタイルのデフォルトであるため、減速スタ

方向	説明
イン	緩和スタイルは、前方の方向に適用されます。
出口	緩和スタイルは逆方向に適用されます。
InOut	緩和スタイルは、最初のハーフに適用され、2番目のハーフに反対に適用されます。

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

テキストをアニメーションする

テキストベースの UI を簡単に強化できます。例えば、カットシーンバナー、プレイヤーの指示、プロンプトなどです。アニメーションエフェクトでテキストを強化できます。

タイプライターエフェクト

「タイプライター」エフェクトは、TextLabels がストーリーを伝えたり、NPC の会話を出力したりするときに最適です。

新しい ModuleScript を ReplicatedStorage 内に作成します。
新しいスクリプトの名前を変更します 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" にローカライズコードを変更して、ソース言語と一致するローカライズ設定をマッチさせます。

Class.TextLabel を適切な場所に作成する、例えば ScreenGui 親の StarterGui 内など。

ラベルの直接子として新しい LocalScript を挿入し、次のコードに入れます。各メッセージは、親オブジェクトのパラメーターである AnimateUI.typeWrite() を呼び出して出力されます。注意、各メッセージは、AnimateUI.typeWrite() のパラメーターである 1>出力する1> と、4>入力する</

ローカルスクリプト
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- ゲームがローカライズされている場合は、翻訳機を読み込みます
--AnimateUI.loadTranslator()

local message1 = [[Beyond this door is the<br /><font size="46" color="rgb(255,50,25)">Great Zorgoth...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...who rules this dungeon <font color="rgb(255,200,50)">unchallenged!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)