用户界面动画/青少年

在动画中，过渡是在序列中的两个关键点之间生成中间帧的过程。当设计用户界面时，您可以使用过渡来顺利将 GuiObject 从一个状态过渡到另一个状态，例如：

在用户选择按钮时，平滑地增加按钮的大小。
从屏幕边缘滑动界面菜单。
当用户收到健康提升时，逐渐动画两个宽度之间的健康条。

单个属性青少年

位置

要调整位置的 GuiObject :

为对象设置 AnchorPoint。
使用 UDim2 对象目标位置的坐标来确定，使用缩放参数的 UDim2 而不是准确的像素值来调整对象的中心位置。
将 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()

大小

要将尺寸的 GuiObject 减少到一半：

使用 UDim2 对象目标尺寸的坐标来确定，使用缩放参数的 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()

旋转

要拆解旋转的 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()

透明度

多个属性控制 UI 透明度，根据对象输入型不同。您可以单独为每个属性进行调整或通过多个属性调整进行组合。或者，您可以通过将对象放置在 CanvasGroup 和渐变群组的 GroupTransparency 内来调整对象的整体透明度。

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

作为现代替代和的选择，您可以在对象上调整画笔透明度，如《stroke》中所述。

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

用户界面渐变 - 画布组透明度
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 内来调整对象的整体颜色。

用户界面对象	属性
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 对象上调整画笔颜色,如在画笔中所述。

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

用户界面渐变 - 画布组颜色
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 , TextStrokeTransparency
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
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()

多个属性青少年

您可以将任何单个属性青少年组合成更复杂的青少年，通过将多个目标属性传递到来实现例如位置 + 旋转或尺寸 + 透明度等。

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

过渡序列

您可以链接 UI 动画，让它们一个接一个发生，通过在前一个潜在青少年的 Completed 事件上播放下一个青少年来实现。例如，以下脚本将对象移到屏幕中心，然后旋转 45°。

用户界面渐变顺序
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 。

风格	描述
线性	以恒定速度移动。
弦	速度由一个渐变运动的弦波决定，以获得轻微的放松运动。
四倍	与弦类似，但基于指数乘插值的稍微更锋利的曲线。
立方体	与四倍相似，但基于立方插值的曲线稍微更锋利。
四分之一	与立方体类似，但基于四次方插值的曲线更锋利。
昆特	与四分之一相似，但基于五次方插值的曲线更锋利。
指数级	基于指数乘插值的最锋利的曲线。
圆圈	遵循圆弧，使加速更突然，减速更平缓，比五分之一或指数更多。
返回	略超过目标，然后返回到位场景。
弹跳	在达到目标后多次向后跳跃，最终定居之前。
弹性	像附在橡皮带上一样移动,超过目标几次。

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 定义了如何使用减紧风格对象的默认值为退出。请注意，带有线性减速风格的青少年不受影响，因为线性插值从开始到结束始终如一。

方向	描述
In	减紧风格适用于向前的方向。
离开	减紧风格在反向方向应用。
退出	放松风格在第一半应用向前，在第二半应用向后。

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

动画文本

您可以轻松增强文本基础的用户界面，例如切场广告、玩家说明和提示以及动画效果。

打字机效果

“打字机”效果非常适合TextLabels讲故事、输出 NPC 对话等

在 ModuleScript 内创建一个新的 **** 。
重命名新脚本 AnimateUI 。

将以下代码粘贴到脚本中：

模块脚本 - 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")
 	-- 移除富文本标签，因为字符动画会破坏标签
	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匹配源语言在本地化设置中。

在适当的位置创建一个，例如在的父辈内。

插入一个新的 LocalScript 作为标签的直接子女，并粘贴以下代验证码。请注意，每个消息都由调用 AnimateUI.typeWrite() 传递参数给父对象、要输出的字符串和字符之间的延迟。

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

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

local label = script.Parent

-- 如果游戏已本地化，加载翻译器
--动画用户界面.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)

在此页面