Hoạt hình UI/thiếu niên

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

• Tăng kích thước của nút một cách mượt mà khi người dùng chọn nó.
• Tùy chọn menu trượt trong và ra khỏi các cạnh màn hình.
• Dần dần hoạt hình một thanh sức khỏe giữa hai chiều khi người dùng nhận được một sức khỏe tăng.

Thiếu niên một thuộc tính

Vị trí

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

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

Các đoạn mã sau di chuyển một ImageLabel bên trong một ScreenGui vào 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

Để tween kích thước của một :

1. Xác định UDim2 phối hướng cho kích thước mục tiêu của đối tượng, bằng cách sử dụng tham số thước đo của UDim2 thay vì chính xác giá trị pixel để đối tượng tweens lên tỷ lệ phần trăm của kích thước màn hình.
2. Gắn một UIAspectRatioConstraint vào đối tượng để duy trì tỷ lệ phần trăm thiết kế khi chuyển đổi.
3. Chuyển một TweenInfo và kích thước mục tiêu sang TweenService:Create() .
4. Chơi tween với Tween:Play() .

Các đoạn mã sau đây thu nhỏ phần ImageLabel bên trong một ScreenGui đến 40% chiều rộng hoặc chiều cao của màn hình (trong đó nhỏ hơn) từ điểm neo 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()

Vòng xoay

Để tween the xoay của một GuiObject :

1. Đặt AnchorPoint cho đối tượng để xoay quanh.
2. Xác định mục tiêu Rotation cho đối tượng.
3. Chuyển một TweenInfo và vòng xoay mục tiêu sang 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 kiểm soát độ trong suốt của giao diện người dùng, tùy thuộc vào loại đánh máytượng.Bạn có thể chuyển tiếp mỗi thuộc tính này riêng lẻ hoặc kết hợp thông qua một chuyển tiếp nhiều thuộc tính .Ngoài ra, bạn có thể tween sự minh bạch tổng thể của một đối tượng bằng cách đặt nó bên trong một CanvasGroup và tween nhóm của nó GroupTransparency .

UI Tween - Bản minh bạch 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 - Bản minh bạch của Nhóm 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()

Màu

Nhiều thuộc tính kiểm soát màu UI, tùy thuộc vào loại đánh máytượng.Bạn có thể chuyển tiếp mỗi thuộc tính này riêng lẻ hoặc kết hợp thông qua một chuyển tiếp nhiều thuộc tính .Ngoài ra, bạn có thể tween màu tổng thể của một đối tượng bằng cách đặt nó bên trong một CanvasGroup và tween nhóm của nó GroupColor3 .

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 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 targetColor = Color3.fromRGB(255, 0, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupColor3 = targetColor})

tween:Play()

Đường viền

Nhiều điều khiển biên giới UI của nhiều thuộc tính, tùy thuộc vào loại đối đánh máy.

Ngoài ra, bạn có thể áp dụng một đứa con UIStroke và tween độ dày, màu sắc và/hoặc sự minh bạch của nó.

UI Tween - Màu & Độ dày của 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()

Teen nhiều thuộc tính

Bạn có thể kết hợp bất kỳ ai trong số thiếu niên một thuộc tính duy nhất vào thiếu niên phức tạp hơn bằng cách chuyển nhiều thuộc tính mục tiêu đến TweenService:Create() , ví dụ vị trí + quay hoặc kích thước + sự minh bạch .

UI Tween - Vị trí & 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 & Sự minh bạch
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 trẻ vịt

Bạn có thể chuỗi các hoạt hình UI xảy ra theo nhau bằng cách chơi các thiếu niên tiếp theo trên sự kiện Completed của thiếu niên trước.Ví dụ, kịch bản sau đây di chuyển một đối tượng vào trung tâm của màn hình, sau đó xoay nó 45°.

Thứ tự Tween UI
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})

-- Lúc đầu chơi vị trí tween
positionTween:Play()

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

Tùy chọn dễ dàng

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

Phong cách

Enum.EasingStyle đặt tỷ lệ interpolation từ đầu đến kết thúc. Mặc định, kiểu dễ dàng được đặt thành Enum.EasingStyle.Quad .

Phong cách dễ dàng - Hình khối
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Hướng

Enum.EasingDirection xác định cách phép biến đổi kiểu dễ dàng áp dụng cho một đối tượng, với một mặc định là Thoát .Lưu ý rằng một thiếu niên với kiểu Linear dễ dàng phong cách không bị ảnh hưởng, vì phương trình nhân tuyến tính là không thay đổi từ đầu đến kết thúc.

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

Hoạt hình văn bản

Bạn có thể dễ dàng cải thiện giao diện người dùng dựa trên văn bản, chẳng hạn như banner cảnh cắt, hướng dẫn người chơi và lời nhắc, với hiệu ứng hoạt hình.

Hiệu ứng máy chữ

Hiệu ứng "máy đánh chữ" là lý tưởng cho TextLabels nói một câu chuyện, xuất cuộc trò chuyện NPC, v.v.

1. Tạo một mới ModuleScript trong ReplicatedStorage .

2. Đổi tên kịch bản mới AnimateUI .

   

3. Sao chép mã sau vào kịch bản:

   ModuleScript - Hoạt hình 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 văn bản nếu có thể
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Thay thế các thẻ phá dòng để vòng lặp grapheme sẽ không bỏ lỡ những nhân vật đó
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Loại bỏ các thẻ RichText vì hoạt hình char-by-char sẽ phá vỡ các thẻ
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Đặt văn bản được 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 , thay đổi mã địa phương cho để phù hợp với ngôn ngữ nguồn trong cài đặt bản địa hóa .

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

5. Thêm một cái mới LocalScript như một con trực tiếp của nhãn và dán vào mã sau.Lưu ý rằng mỗi tin nhắn được xuất bằng cách gọi AnimateUI.typeWrite() với các tham số cho đối tượng cha, chuỗi để xuất và thời gian trễ giữa các ký tự.

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