用户界面动画/青少年 | 文档 - Roblox 创作者中心

在动画中，渐变是一个过程，在一系列中生成两个关键点之间的中间框架。当设计用户界面时，您可以使用渐变来从一个状态到另一个状态轻松地将GuiObject 转换为：

在用户选择按钮时，按钮的大小会自动调整。
从屏幕边缘滑动 UI 菜单。
在用户收到健康提升时，渐变在两个宽度之间的健康条。

单个属性십几

位置

要调整 Class.GuiObject 的位置：

为对象设置 AnchorPoint。
使用 UDim2 的缩放参数，用于确定目标位置，而不是使用 Datatype.UDim2 的实际像素值，以便对象 tweens 到屏幕的中心。
通过 TweenInfo 和目标位置到 TweenService:Create() 。
使用 Tween:Play() 来播放特效。

下面的代码示例将一个 ImageLabel 移动到一个 ScreenGui 到屏幕的中心：

用户界面 - 位置
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 的 GuiObject 大小：

使用 UDim2 的缩放参数，用于确定目标大小，而不是使用 Datatype.UDim2 的实际像素值，以便对象在屏幕尺寸的相对百分比进行调整。
将 UIAspectRatioConstraint 附加到对象，以便在渐变时保持其设计的外观比例。
通过 TweenInfo 和目标大小到 TweenService:Create()。
使用 Tween:Play() 来播放特效。

下面的代码示例将一个 ImageLabel 缩放到 ScreenGui 内，以 40% 的屏幕宽度或高度（较小的是）从对象的中心位置：

用户界面 - 尺寸
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 的旋转：

设置AnchorPoint 以便对象在周围旋转。
为对象决定目标 Rotation。
通过 TweenInfo 和目标旋转到 TweenService:Create() 。
使用 Tween:Play() 来播放特效。

用户界面 - 尺寸
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()

透明度

多个属性控制界面透明度，根据对象类输入。您可以通过多个属性斜线调整透明度来调整这些属性。或者，您可以通过将多个属性放置在 Class.CanvasGroup 中以及通过调整群组的 CanvasGroup 来调整对象的总透明度。

用户界面对象	属性
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency，TextTransparency，TextStrokeTransparency
TextButton	BackgroundTransparency，TextTransparency，TextStrokeTransparency
ImageLabel	BackgroundTransparency，ImageTransparency
ImageButton	BackgroundTransparency，ImageTransparency

作为现代的替代品 TextLabel.TextStrokeTransparency 和 TextButton.TextStrokeTransparency ，您可以在 UIStroke 对象上渐变石头透明度如下所示在 2> 画笔2> 。

用户界面 - 图像透明度
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()

用户界面 -  canvas 组透明度
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()

颜色

多个属性控制界面颜色，根据对象类输入。您可以通过多个属性斑点来渐变对象的颜色，或通过“多重属性斑点”来将多个属性斑点组合在一起。或者，您可以通过将对象放置在 CanvasGroup 中，以及通过“ Class.CanvasGroup.GroupColor3|GroupColor3

用户界面对象	属性
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 ，您可以在 2>Stroke2> 对象上渐变 stroke 颜色作为在 5>Stroke5> 中所述。

用户界面 - 图像颜色
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()

用户界面 - 可vas画组颜色
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()

击球

多个属性控制界面边界，根据对象类输入。

用户界面对象	属性
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 子，并渐变其厚度、颜色和/或透明度。

用户界面对象	属性
UIStroke	Color , Thickness , Transparency

用户界面 - 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()

多重属性십代

您可以通过将多个目标属性传递给 TweenService:Create() 来将单个属性青少年组合成更复杂的青少年，例如位置 + 旋转或 1> 大小 + 透明度1> 。

用户界面 - 位置和旋转
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()

用户界面 - 大小和透明度
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 事件上的相继的 tweens 来串联 UI 动画。例如，下面的脚本将一个对象移动到屏幕中心，然后旋转 45°。

用户界面 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 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 。

样式	描述
直线	以一致的速度移动。
正弦	速度由一个正弦波确定，用于轻度放松运动。
四重	与弯道类似，但曲线有一些微的弯插值。
立方体	与四重类似，但略微更高的曲线基于方块 interpolation。
Quart	与立方体类似，但曲线更锋利，基于四分之一插值。
千分之一	与 Quart 类似，但使用基于 quintic 的更锋利的插值线。
倍数	使用指数乘插值的最锋利的曲线。
圆形	跟随圆周拱形，使加速度更大，减速度更慢，相对于 Quint 或 Exponential 更适合。
返回	略过目标，然后返回到位场景。
弹跳	在达到目标后，弹出多次后退，最终结束。
弹性	像被附在橡皮带上一样移动，并多次射击目标。

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 定义了 how the 调整风格 interpolation 应用于一个对象，默认为出。注意，渐变 with 0>线性0> 调整风格不受影响，因为渐变从开始到结束都不变。

方向	描述
在	纵向放松风格适用于前向。
结束	纵向卷轴的应用在倒向卷轴中使用。
出入口	纵向渐变的风格适用于第一半，并且反向在第二半。

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

动态文本

您可以使用动画效果轻松强化文本基础用户界面，例如切场动画、玩家指示和提示，以及提示。

打字机效果

“打字机”效果是适合 TextLabels 那些讲故事、输出 NPC 对话等等的

在 ModuleScript 中创建一个新的 Class.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")
 	-- 移除 RichText 标签，因为 char-by-char 动画会打破标签
	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” )，请将本地语言代码修改为 "en" 来匹配源语言在 SOURCE_LOCALE 中。

在适当位置创建一个 TextLabel ，例如在 ScreenGui 内，父级是 StarterGui 。

作为标签的直接子女，插入一个新的 LocalScript 作为标签的直接子女，并在以下代验证码中粘贴。注意，每个消息都是通过调用 AnimateUI.typeWrite() 与参数为父对象、输出字符串和延迟之间的时间进行输出。

本地脚本
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- 加载翻译机器，如果游戏是本地化的
--动态UI加载器

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)