الرسوم المتحركة لواجهة المستخدم / التويين

في الرسوم المتحركة، التويين هو عملية توليد إطارات وسيطة بين نقطتين رئيسيتين في تسلسل. عند تصميم واجهة المستخدم، يمكنك استخدام التويين للانتقال بـ GuiObject بسلاسة من حالة إلى أخرى، مثل:

زيادة حجم الزر بسلاسة عندما يختاره المستخدم.
انزلاق قوائم واجهة المستخدم إلى الداخل والخارج من حواف الشاشة.
تحريك شريط الصحة تدريجياً بين عرضين عندما يحصل المستخدم على تعزيز للصحة.

التويينات ذات الخاصية الواحدة

الموضع

لتويين الموضع لـ GuiObject:

قم بتعيين AnchorPoint للكائن.
حدد إحداثيات UDim2 لموضع الهدف للكائن، باستخدام معلمات المقياس لـ UDim2 بدلاً من قيم البكسل الدقيقة بحيث يتويّن الكائن إلى المركز الدقيق للشاشة.
مرر TweenInfo وموضع الهدف إلى TweenService:Create().
قم بتشغيل التويين باستخدام Tween:Play().

تقوم الشيفرة البرمجية التالية بنقل ImageLabel داخل ScreenGui إلى المركز الدقيق للشاشة:

UI Tween - Position

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% من عرض أو ارتفاع الشاشة (أيها كان أصغر) من نقطة الارتكاز المركزية للكائن:

UI Tween - Size

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().

UI Tween - Size

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()

تتحكم خصائص متعددة في شفافية واجهة المستخدم، اعتمادًا على نوع الكائن. يمكنك تويين كل من هذه الخصائص بشكل فردي أو مجتمعة من خلال تويين متعدد الخصائص. بدلاً من ذلك، يمكنك تويين الشفافية العامة لكائن عن طريق وضعه داخل CanvasGroup وتويين GroupTransparency للمجموعة.

كائن واجهة المستخدم	الخصائص
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

كبديل حديث لـ TextLabel.TextStrokeTransparency و TextButton.TextStrokeTransparency، يمكنك تويين شفافية السكتة الدماغية على كائن UIStroke كما هو موضح في Stroke.

UI Tween - Image Transparency

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 - Canvas Group Transparency

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 وتويين 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 كما هو موضح في Stroke.

UI Tween - Image Color

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 - Canvas Group Color

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

UI Tween - UIStroke Color & Thickness

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()، على سبيل المثال الموضع + الدوران أو الحجم + الشفافية.

UI Tween - Position & 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 - Size & Transparency

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 للتويين السابق. على سبيل المثال، تقوم الشيفرة التالية بنقل كائن إلى مركز الشاشة، ثم تدويره بمقدار 45°.

UI Tween Sequence

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)

انتقالات النمط

يمكن أيضًا تحريك كائنات واجهة المستخدم من خلال انتقالات النمط، مقارنةً بـ انتقالات CSS، حيث يتم تويين خاصية أو أكثر من واجهة المستخدم من خلال تعريفات StyleRule. راجع دليل محرر النمط للحصول على التفاصيل.

النتيجة النهائية لقانون الحالة المنسقة في محرر النمط.

خيارات التخفيف

باستخدام خيارات التخفيف لـ TweenInfo، يمكنك التحكم في نمط واتجاه التخفيف للرسوم المتحركة لواجهة المستخدم.

النمط

تحدد Enum.EasingStyle معدل التداخل من البداية إلى النهاية. بشكل افتراضي، يتم تعيين نمط التخفيف إلى Enum.EasingStyle.Quad.

النمط	الوصف
خطّي	يتحرك بسرعة ثابتة.
جيب	تحدد السرعة بواسطة موجة جيب للحصول على حركة تخفيف لطيفة.
رباعي	مشابه لـ جيب ولكن مع منحنى أكثر حدة قليلاً يعتمد على التداخل الرباعي.
مكعب	مشابه لـ رباعي ولكن مع منحنى أكثر حدة قليلاً يعتمد على التداخل المكعب.
ربع	مشابه لـ مكعب ولكن مع منحنى أكثر حدة يعتمد على التداخل الرباعي.
خماسي	مشابه لـ ربع ولكن مع منحنى أكثر حدة يعتمد على التداخل الخماسي.
أسّي	أكثر منحنى حدة يعتمد على التداخل الأسّي.
دائري	يتبع قوس دائري، بحيث يكون التسارع أكثر فجائية والتباطؤ أكثر تدريجياً مقارنةً بـ خماسي أو أسّي.
عودة	يتجاوز الهدف قليلاً، ثم يعود إلى مكانه.
ارتداد	يرتد للخلف عدة مرات بعد الوصول إلى الهدف، قبل أن يستقر في النهاية.
مرن	يتحرك كما لو كان متصلاً بشريط مطاطي، متجاوزًا الهدف عدة مرات.

رسوم بيانية لتنوعات EasingStyle مع اتجاه تخفيف 'In'.

Easing Style - Cubic

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

الاتجاه

تحدد Enum.EasingDirection كيفية تطبيق نمط التخفيف على كائن، مع افتراض أن الاتجاه هو خارج. لاحظ أن التويين مع نمط تخفيف خطّي لا يتأثر، حيث أن التداخل الخطي ثابت من البداية إلى النهاية.

الاتجاه	الوصف
داخل	يطبق نمط التخفيف في اتجاه للأمام.
خارج	يطبق نمط التخفيف في اتجاه عكسي.
داخل وخارج	يطبق نمط التخفيف للأمام في النصف الأول وعكسيًا في النصف الثاني.

Easing direction - InOut

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

تأثير كاتب على النص

يمكنك بسهولة تعزيز واجهة المستخدم المعتمدة على النص، مثل لافتات المشاهد، وتعليمات اللاعبين، والمطالبات، مع تأثيرات متحركة. تأثير "كاتب" مثالي لـ TextLabels التي تروي قصة، أو تخرج محادثات NPC، وما إلى ذلك.

أنشئ ModuleScript جديد داخل ReplicatedStorage.
أعد تسمية البرنامج النصي الجديد إلى AnimateUI.

ألصق الشيفرة التالية في البرنامج النصي:

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 لأن الرسوم المتحركة حرفًا بحرف ستكسر العلامات
	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 ليتناسب مع اللغة المصدر في إعدادات الترجمة.

أنشئ TextLabel في موقع مناسب، مثل داخل ScreenGui المتصلة بـ StarterGui.

أدخل LocalScript جديد كطفل مباشر للتسمية وألصق الشيفرة التالية. لاحظ أن كل رسالة يتم إخراجها عن طريق استدعاء AnimateUI.typeWrite() مع معلمات للكائن الأب، والسلسلة للإخراج، والتأخير بين الأحرف.

LocalScript

local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- تحميل المترجم إذا كانت اللعبة مترجمة
--AnimateUI.loadTranslator()

local message1 = [[خلف هذا الباب هو<br /><font size="46" color="rgb(255,50,25)">الزورغوث العظيم...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...الذي يحكم هذه الزنزانة <font color="rgb(255,200,50)">بدون تحدٍ!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)