Roblox GUI 动画

GUI动画

官方文档-UI动画
官方文档-TweenSize参数说明

本节中界面动画主要使用tween和tweenservice来进行界面动画。在设计界面的时候，tweening可以用来平滑的变换界面的位置和状态。比如：

• 平滑的放大一个选中的按钮
• 从屏幕的边缘滑入或者滑出界面
• 当血量发生变换的时候，血条进行动画过渡。

1. 基础变换

在界面控价下添加一个LocalScript来控制界面的动作

local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.1, 0, 0.5, 0)

object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))

这段代码可以控制空间移动到屏幕的中央。

UDim2结构可以看出来需要四个参数，分别是x的scale，x的offset，y的scale，y的offset，很好理解，跟cegui的定位很想，无需多说。

大小变换

local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.5, 0, 0.5, 0)
 

object:TweenSize(UDim2.new(0.4, 0, 0.4, 0))

位置和大小同时变换

local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, -object.Size.X.Offset, 0.5, 0)
 
wait(2)
 
object:TweenSizeAndPosition(UDim2.new(0.4, 0, 0.4, 0), UDim2.new(0.5, 0, 0.5, 0))

额外参数

上面介绍的几个函数都可以额外接受一些其他参数，用来设定过渡的方式，时间，以及动画完成之后的回调。

以TweenSize为例：

函数的原型是： 可见文档 https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSize

function object:TweenSize(endSize, easingDirection, easingStyle, time, override, callback)
end
-- endSize 变换的结果
-- easingDirection Enum.EasingDirection的三个枚举 可取值0，1，2 默认1
-- easingStyle Enum.EasingStyle 默认值 Quad
-- time 时间，默认1秒
-- override bool型 默认false ，标识是否直接覆盖已有的其他tween过程
-- callback 回调，当变换结束时触发
-- 函数返回bool 表示是否播放成功

local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, 0, 0.5, 0)
 
wait(2)
 
object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint)

-- 2、3参数可以传nil，如果不需要改变默认值的话
object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), nil, nil, 3)

Enum.EasingDirection.Out, Enum.EasingStyle.Quint 这个参数比较适合界面的出现和消失

更加强大的变换

上面介绍的方法只能修改控件的大小和位置，其他属性比如旋转、颜色以及透明度都是无法修改的，这个时候就要用到TweenService了，这是一个强力的变换工具，基本上可以修改控件的所有属性。

颜色变换

比方说，有时候你需要把血条的颜色从绿色变成黄色，这个时候就需要对Color3进行变换：

local TweenService = game:GetService("TweenService")
 
local frame = script.Parent
frame.Position = UDim2.new(0, 20, 0, 20)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(0, 400, 0, 30)
frame.BackgroundColor3 = Color3.fromRGB(0, 255, 75)
 
-- Declare target size and color values
local newSize = UDim2.new(0, frame.Size.X.Offset*0.5, 0, frame.Size.Y.Offset)
local newColor = Color3.fromRGB(255, 255, 50)
 
-- Set up tween
local tweenInfo = TweenInfo.new(1.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out)
local tween = TweenService:Create(frame, tweenInfo, {Size=newSize, BackgroundColor3=newColor})
 
wait(2)
 
tween:Play()

变换队列

local TweenService = game:GetService("TweenService")
 
local frame = script.Parent
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Position = UDim2.new(0, 70, 0, 70)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(0, 100, 0, 100)
frame.BackgroundColor3 = Color3.new(0, 0, 0)
 
-- Set up tweens
local tweenInfo1 = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
local tween1 = TweenService:Create(frame, tweenInfo1, {Position=UDim2.new(0.5, 0, 0.5, 0)})
local tweenInfo2 = TweenInfo.new(1.5, Enum.EasingStyle.Quart, Enum.EasingDirection.InOut)
local tween2 = TweenService:Create(frame, tweenInfo2, {Rotation=180})
 
tween1.Completed:Connect(function()
	tween2:Play()
end)
 
wait(2)
 
tween1:Play()