はじめに
今回はUIの要素をTweenServiceで移動アニメーションを付与させる方法を解説します。
公式Reference
TweenServiceでWorkspace上のPartなどを動かす方法はこちら
実装
UIを配置
実際の配置
フォルダ階層
Canvas
FirstFrame
Posision : {0.256, 0},{0.454, 0}
SecondFrame
Posision : {0.691, 0},{0.454, 0}
コード
StarterGuiにLocalScriptを配置
local TweenService = game:GetService("TweenService")
local canvas = script.Parent.ScreenGui.Canvas
local firstFrame = canvas.FirstFrame
local secondFrame = canvas.SecondFrame
local fisrtButton = canvas.FirstButton
local secondButton = canvas.SecondButton
fisrtButton.Activated:Connect(function()
--firstFrameをTweenServiceで縦に動かす
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
local tween = TweenService:Create(firstFrame, tweenInfo, {Position = UDim2.new(0.256, 0, 0.2, 0)})
tween:Play()
end)
secondButton.Activated:Connect(function()
--secondFrameをTweenServiceで横に動かす
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
local tween = TweenService:Create(secondFrame, tweenInfo, {Position = UDim2.new(0.1, 0, 0.454, 0)})
tween:Play()
end)
tweenInfoで目的地まで動く時間と動き方を設定します。
tweenで動かすものとtweenInfo、目的地の位置情報が含まれています。
tween:Play()で実際に動かす感じになります。
UIの目的地指定方法について
FirstFrameの目的地指定方法について少し深ぼります。
FirstFrameの初期位置はPosision : {0.256, 0},{0.454, 0}
以下のコードで初期位置からY座標-0.254を引いた位置に目的地を指定してる感じになります。
local tween = TweenService:Create(firstFrame, tweenInfo, {Position = UDim2.new(0.256, 0, 0.2, 0)})
以下の部分で目的地のUI座標を指定する感じです。
UDim2.new(0.256, 0, 0.2, 0)}
UDim2の公式Reference
実行！
Discussion