Hoạt Hình / Thiếu Niên

Trong hiệu ứng động, tweening là quá trình tạo ra các khung giữa hai điểm chính trong một chuỗi. Khi thiết kế một giao diện người dùng, bạn có thể sử dụng tweening để mượt chuyển một GuiObject từ một trạng thái này sang một trạng thái khác, ví dụ như:

• Tăng kích thước của nút một cách mượt mà khi một người dùng chọn nó.
• Di chuyển menu người dùng trong và ngoài các cạnh màn hình.
• Tạo hoạt họa một dòng chữ nào đó trên cùng một kích thước khi một người nhận được một cúc tăng sức khỏe.

Một-Thân-Tính Tweens

Vị trí

Để tween vị trí của một GuiObject :

1. Đặt AnchorPoint cho đối tượng.
2. Xác định UDim2坐标 cho vị trí mục tiêu của đối tượng, bằng cách sử dụng thước đo 参数 của UDim2 thay vì giá trị pixel chính xác để cho đối tượng tweens đến vị trí chính xác của màn hình.
3. Điền một TweenInfo và vị trí mục tiêu đến TweenService:Create() .
4. Chơi tween với Tween:Play() .

Các câu code sau đây di chuyển một ImageLabel trong một ScreenGui đến trung tâm chính xác của màn hình:

UI Tween - Vị trí
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()

Kích thước

Để tăng kích thước của một GuiObject :

1. Xác định UDim2 coordinated for the object's target size, using the scale parameters of UDim2 instead of exact pixel values so that the object tweens to a relative percentage of the screen size.
2. Kết dính một UIAspectRatioConstraint đến đối tượng để duy trì tỷ lệ kích thước thiết kế khi tăng trưởng.
3. Điều chỉnh kích thước TweenInfo và kích thước mục tiêu TweenService:Create() .
4. Chơi tween với Tween:Play() .

Các câu code dưới đây tăng một ImageLabel trong một ScreenGui để 40% chiều rộng hoặc chiều cao của màn hình (hoặc nhỏ hơn) từ điểm trung tâm của trục trung tâm của đối tượng:

UI Tween - Kích thước
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()

Chuyển động

Để tween Rotation của một GuiObject :

1. Đặt AnchorPoint cho đối tượng để quay xung quanh.
2. Xác định mục tiêu Rotation cho đối tượng.
3. Tạo một TweenInfo và quay về phía mục tiêu bằng cách sử dụng TweenService:Create() .
4. Chơi tween với Tween:Play() .

UI Tween - Kích thước
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()

Độ trong suốt

Nhiều thuộc tính điều khiển UI trong suốt, tùy thuộc vào loại thể đối tượng. Bạn có thể tùy chỉnh mỗi thuộc tính này riêng lẻ hoặc kết hợp thông qua một Class.CanvasGroup . Alternatively, bạn có thể tùy ch

UI Tween - Hiển thị hình ảnh
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()

UI Tween - Sự trong suốt của Canvas Group
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()

Màu

Nhiều màu mô tả UI, tùy thuộc vào loại đánh máytượng. Bạn có thể tùy chỉnh màu mô tả của mỗi đối tượng bằng cách đặt mỗi đối tượng trong một Class.CanvasGroup và tùy chỉnh màu mô tả nhóm bằng c

UI Tween - Màu hình ảnh
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()

UI Tween - Màu nhóm vảy
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()

Cột

Nhiều thuộc tính điều khiển biên giới người dùng, tùy thuộc vào loại thể thao.

Tương tự, bạn có thể áp dụng một con dấu UIStroke và tùy chỉnh độ dày, màu sắc và/hoặc độ trong suốt của nó.

UI Tween - Màu và độ dày 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()

Nhiều tính năng tùy chỉnh

Bạn có thể kết hợp bất kỳ single-property tweens ใน các tweens phức tạp hơn bằng cách truyền nhiều thuộc tính mục tiêu đến TweenService:Create() , ví dụ như vị trí + quay hoặc 1> kích thước + độ trong suốt1> .

UI Tween - Vị trí và Rotation
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()

UI Tween - Kích thước và độ trong suốt
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()

Chuỗi Tween

Bạn có thể chuỗi hoạt họa UI để xảy ra một sau khác bằng cách chơi những người tweens tiếp theo trên sự kiện Completed của một tween trước. Ví dụ, script sau đây di chuyển một đối tượng đến trung tâm của màn hình, sau đó quay nó 45 độ.

Số thứ tự hoạt họa
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})

-- Đầu tiên chơi vị trí tween
positionTween:Play()

-- Chơi lượt quay khi hoàn thành lượt quay vị trí
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Lựa chọn dễ dàng

Sử dụng các tùy chọn dễ dàng hóa của TweenInfo , bạn có thể kiểm soát dễ dàng hóa kiểu style và hướng direction của hoạt họa UI.

Kiểu

Enum.EasingStyle đặt tỷ lệ biến đổi từ đầu đến kết thúc. Bởi mặc định, kiểu dễ dàng hóa được đặt để Enum.EasingStyle.Quad .

Kiểu dễ dàng - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Hướng

Enum.EasingDirection định nghĩa cách thước đo dễ dàng hóa áp dụng cho một đối tượng, với một giá trị mặc định là thoát . Lưu ý rằng một tween với 0>thước đo dễ dàng hóa line0> không bị ảnh hư

Hướng dẫn - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Văn Bản Hoạt Hình

Bạn có thể dễ dàng tăng cường UI dựa trên văn bản, chẳng hạn như các banner cutscene, hướng dẫn người chơi và hội thoại, với các hiệu ứng hoạt họa.

Hiệu ứng máy viết

Hiệu ứng "typewriter" lý tưởng cho TextLabels kể chuyện, sản xuất cuộc hội thoại NPC, v.v.

1. Tạo một mô-đun mới ModuleScript trong ReplicatedStorage .

2. Đổi tên mới AnimateUI .

   

3. Vẽ mã sau đây vào script:

   ModuleScript - Anhimation UI
   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
   
   	-- Dịch nội dung nếu có thể
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Thay thế nhãn câu mất dấu để lượng tử lỗ trong câu không bị lỗi
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Loại bỏ các thẻ RichText vì hoạt họa char-by-char sẽ phá vỡ các thẻ
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Đặt chữ văn bản đã dịch/chỉnh sửa trên cha
   	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

   Nếu ngôn ngữ nguồn của trải nghiệm của bạn không phải là tiếng Anh ( "en"), thay đổi mã ngôn ngữ cho SOURCE_LOCALE để khớp với ngôn ngữ nguồn trong 1>cài đặt localization1> .

4. Tạo một TextLabel trong một vị trí thích hợp, chẳng hạn như trong một ScreenGui có phụ huynh là StarterGui .

5. Làm mới một LocalScript mới như là con cái trực tiếp của nhãn và dán vào mã sau đây. Lưu ý rằng mỗi thông điệp là kết quả của việc gọi AnimateUI.typeWrite() với các tham số cho đối tượng cha, màn hình để xuất và độ trễ giữa các

   Script địa phương
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Tải người dịch nếu trò chơi được dịch
   --AnimateUI. 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)