TweenService

TweenService は、Roblox で GUI エレメント、パーツ、その他のオブジェクトに滑らかなアニメーションを作成できるサービスです。オブジェクトのプロパティを指定された期間内である状態から別の状態に補間します。

トゥイーントゥイーンとは、オブジェクトのプロパティを開始状態から終了状態に補間するアニメーションです。
TweenInfoトゥイーンの持続時間、イージングスタイル、イージング方向、繰り返し回数などのパラメータを定義します。
イージングスタイルと方向イージングスタイルは、トゥイーンの開始値と終了値を補間するために使用される数学的関数を定義します。イージング方向は、トゥイーンが開始値と終了値に対してどのように進行するかを定義します。

トゥイーン可能なオブジェクト

Positionパーツ/モデルを新しい場所に移動します。
Sizeパーツ/モデルのサイズを変更します。
Orientationパーツ/モデルを回転させます。
Transparencyパーツ/モデルの透明度を調整します。
Colorパーツ/モデルの色を変更します。
Positionパーツ/モデルを新しい場所に移動します。
Sizeパーツ/モデルのサイズを変更します。
BackgroundColor3GUI エレメントの背景色を変更します。
Transparencyパーツ/モデルの透明度を調整します。
Brightness光源の明るさを調整します。
Colorパーツ/モデルの色を変更します。
Range光源の範囲を変更します。
CFrameカメラを移動または回転させます。
Volumeサウンドの音量を調整します。
PlaybackSpeedサウンドの再生速度を変更します。

TweenService の例

位置のトゥイーン

local TweenService = game:GetService("TweenService")

-- Define TweenInfo
local tweenInfo = TweenInfo.new(
	2, -- Time (seconds)
	Enum.EasingStyle.Quad, -- Easing Style
	Enum.EasingDirection.Out, -- Easing Direction
	0, -- Repeat count (0 means no repeat)
	false, -- Reverses (tween goes back and forth)
	0 -- Delay time (seconds)
)

local part = script.Parent
part.Position = Vector3.new(0, 2.5, 0)
part.Anchored = true
part.Parent = workspace

-- Define the end state of the properties you want to tween
local goal = {}
goal.Position = Vector3.new(10, 5, 0)

-- Create the tween
local tween = TweenService:Create(part, tweenInfo, goal)

-- Play the tween
tween:Play()
Image 1
Roblox Studio

GUI エレメントのトゥイーン

local TweenService = game:GetService("TweenService")

-- Define TweenInfo
local tweenInfo = TweenInfo.new(
	2, -- Time (seconds)
	Enum.EasingStyle.Quad, -- Easing Style
	Enum.EasingDirection.Out, -- Easing Direction
	0, -- Repeat count (0 means no repeat)
	false, -- Reverses (tween goes back and forth)
	0 -- Delay time (seconds)
)

local part = script.Parent
part.Position = Vector3.new(0, 2.5, 0)
part.Anchored = true
part.Parent = workspace

-- Define the end state of the properties you want to tween
local goal = {}
goal.Position = Vector3.new(10, 5, 0)

-- Create the tween
local tween = TweenService:Create(part, tweenInfo, goal)

-- Play the tween
tween:Play()
Image 1
Roblox Studio

光源プロパティのトゥイーン

local TweenService = game:GetService("TweenService")

-- Define TweenInfo
local tweenInfo = TweenInfo.new(
	2, -- Time (seconds)
	Enum.EasingStyle.Quad, -- Easing Style
	Enum.EasingDirection.Out, -- Easing Direction
	0, -- Repeat count (0 means no repeat)
	false, -- Reverses (tween goes back and forth)
	0 -- Delay time (seconds)
)

local part = script.Parent
part.Position = Vector3.new(0, 2.5, 0)
part.Anchored = true
part.Parent = workspace

-- Define the end state of the properties you want to tween
local goal = {}
goal.Position = Vector3.new(10, 5, 0)

-- Create the tween
local tween = TweenService:Create(part, tweenInfo, goal)

-- Play the tween
tween:Play()
Image 1
Roblox Studio

イージングスタイル

Linear開始から終了まで一定速度で移動します。
Sine滑らかで周期的な運動を実現するために正弦波を使用します。
Back終了値を一度超えた後に戻ります。
Quadすばやく加速し、その後減速します。
CubicQuad と似ていますが、加速と減速がより強力です。
QuartCubic よりもさらに強力な加速と減速です。
Quint最も強力な加速と減速です。
Bounce終了時にバウンドする効果を模倣します。
Elastic終了値を超えてバネのように動きます。
Exponentialゆっくりと始まり、指数関数的に加速します。
Inトゥイーンがゆっくり始まり、終了に向かってスピードアップします。
Outトゥイーンが素早く始まり、終了に向かって減速します。
InOut「In」と「Out」を組み合わせたもので、最初はゆっくり、途中で加速し、終了に向かって再び減速します。

このチュートリアルがお役に立ちましたら、私の仕事をサポートするためにコーヒーをおごっていただけると嬉しいです。

ご支援、誠にありがとうございます！

コーヒーをおごる