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

アニメーションでは、ティーニングはシーケンスの 2つのキーポイント間の中間フレームを生成するプロセスです。ユーザーインターフェイスを設計するとき、tweening を使用して、次のように、1つの状態から別の状態にスムーズに移行できます：

ユーザーがボタンを選択すると、ボタンのサイズをスムーズに増やす。
画面の端にスライドする UI メニュー。
ユーザーがヘルスブーストを受け取ったとき、2つの幅の間で健康バーを徐々にアニメーション化する。

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

地位

To tween the 位置 of a GuiObject :

オブジェクトの AnchorPoint を設定します。
オブジェクトのターゲット位置の UDim2 座標を決定し、スケールパラメータを使用して、正確なピクセル値ではなく、UDim2 の代わりに、オブジェクトが画面の正確な中心に移動するように、 scale パラメータを使用します。
パス a TweenInfo とターゲットの位置を TweenService:Create() に渡します。
tween を演奏して Tween:Play() 。

次のコードスニペットは、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()

サイズ

To tween the サイズ of a GuiObject :

オブジェクトのターゲットサイズの UDim2 座標を決定し、スケールパラメータを使用して、ピクセル値ではなく、UDim2 scale を使用します。
オブジェクトに UIAspectRatioConstraint を付けて、減衰中に設計されたアスペクト比率を維持する
パス a TweenInfo とターゲットサイズを TweenService:Create() に渡します。
tween を演奏して Tween:Play() 。

次のコードスニペットは、オブジェクトのセンターアンカーポイントから 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()

回転

To tween the 回転 of a GuiObject :

オブジェクトを回転させるための AnchorPoint を設定します。
オブジェクトのターゲットを Rotation 決定します。
パス a TweenInfo とターゲットの回転を TweenService:Create() に。
tween を演奏して Tween:Play() 。

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 の透明度を制御します。これらのプロパティのそれぞれを個別にまたはマルチプロパティ挿入を通じて組み合わせて挿入できます。代わりに、オブジェクト全体の透明度を上げるには、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 ティーン - 画像の透明度
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 ティーン - キャンバスグループの透明性
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 ティーン - 画像の色
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 ティーン - キャンバスグループカラー
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 ツイーン - 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("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()

複数のプロパティのティーン

たとえば、シングルプロパティのティーンを複数のターゲットプロパティにパスして、例えば、位置+回転またはサイズ+透明性など、より複雑なティーンに結合できます。

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 tween = TweenService:Create(object, tweenInfo, {Position = targetPosition, Rotation = targetRotation})

tween:Play()

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 targetTransparency = 0.8

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

tween:Play()

ティーンシーケンス

以前のティーンの Completed イベントに次々と起こる UI アニメーションをチェーンすることができます。たとえば、次のスクリプトでは、オブジェクトを画面の中央に移動し、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)

オプションの緩和

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

スタイル

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

スタイル	説明
線形	定速で移動します。
サイン	スピードは、柔らかい緩和動作のためのサインウェーブによって決定されます。
クワッド	サインと似ていますが、幾何学的インターポレーションに基づく若干鋭いカーブを持っています。
立方体	クワッドと似ていますが、立方体のインターポレーションに基づくやや鋭いカーブがあります。
クォート	立方体と似ていますが、四次元インターポレーションに基づくさらに鋭いカーブがあります。
クイント	クォートと似ていますが、5次元インターポレーションに基づくさらに鋭いカーブがあります。
経験値	指数積算に基づく最も鋭いカーブ。
円形	加速度がクイントまたは経験値よりも鋭く、減速度がよりゆっくりとなるような円形のアーチをたどります。
戻る	ターゲットをわずかにオーバーシュートし、場プレースに戻ります。
バウンス	ターゲットに到達した後、最終的に決着するまで、複数回後ろ向きにバウンスします。
エラスティック	ゴムバンドに付属しているかのように動き、ターゲットを何回もオーバーシュートします。

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 です。線型緩和スタイルを持つティーンは、線型インターポレーションが開始から終了まで一定であるため、影響を受けません。

向き	説明
In	緩和スタイルは前方方向に適用されます。
アウト	緩和スタイルは逆方向に適用されます。
インアウト	緩和スタイルは、最初の半分に向かって前進し、後半には逆方向に適用されます。

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

テキストをアニメート

テキストベースの UI、例えばカットシーンバナー、プレイヤーの指示、およびプロンプトを、アニメーション効果で簡単に強化できます。

タイプライター効果

「タイプライター」効果は、TextLabels ストーリーを語り、NPC会話を出力するなど、理想的です

Create a new ModuleScript within ReplicatedStorage 。
新しいスクリプトの名前を変更 AnimateUI 。

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

ModuleScript - アニメーションUI
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 を作成し、例えば ScreenGui 親に属する StarterGui 内。

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

本地スクリプト
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- ゲームがローカライズされている場合、翻訳者をロードする
--AnimatedUI.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)