المصمّم

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

*This content is translated using AI (Beta) and may contain errors. To view this page in English, click here.

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

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

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

الوضع

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

  1. قم بضبط AnchorPoint للكائن.
  2. حدد إحداثيات UDim2 لموقع الكائن المستهدف، باستخدام معلمات النسبة لـ UDim2 بدلاً من قيم البيكسل الدقيقة حتى يتم توين الكائن إلى المركز الدقيق للشاشة.
  3. مرر TweenInfo والموقع المستهدف إلى TweenService:Create().
  4. قم بتشغيل التويين باستخدام 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:

  1. حدد إحداثيات UDim2 لحجم الكائن المستهدف، باستخدام معلمات النسبة لـ UDim2 بدلاً من قيم البيكسل الدقيقة حتى يتم توين الكائن إلى نسبة نسبية من حجم الشاشة.
  2. قم بإرفاق UIAspectRatioConstraint بالكائن للحفاظ على نسبة العرض إلى الارتفاع المصممة عند التويين.
  3. مرر TweenInfo والحجم المستهدف إلى TweenService:Create().
  4. قم بتشغيل التويين باستخدام 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:

  1. قم بضبط AnchorPoint للكائن للدوران حوله.
  2. حدد Rotation المستهدف للكائن.
  3. مرر TweenInfo والدوران المستهدف إلى TweenService:Create().
  4. قم بتشغيل التويين باستخدام 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 للمجموعة.

كائن واجهة المستخدمالخصائص
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
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 للمجموعة.

كائن واجهة المستخدمالخصائص
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
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()

الحدود

تتحكم خصائص متعددة في حدود واجهة المستخدم، اعتمادًا على نوع الكائن.

كائن واجهة المستخدمالخصائص
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

بدلاً من ذلك، يمكنك تطبيق كائن UIStroke الطفل وتويين سمكه، لونه، و/أو شفافيته.

كائن واجهة المستخدمالخصائص
UIStrokeColor, 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' EasingDirection. 
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 التي تحكي قصة، أو تخرج محادثات الشخصيات غير القابلة للعب، وما إلى ذلك.

  1. قم بإنشاء ModuleScript جديدة داخل ReplicatedStorage.

  2. أعد تسمية البرنامج النصي الجديد إلى AnimateUI.

  3. الصق الكود التالي في البرنامج النصي:

    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

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

  5. أدخل برنامج 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)
©2026 شركة Roblox Corporation. تُعد منصّة Roblox، وشعار Roblox وشعار "توسيع حدود المخيلة"، من ضمن علاماتنا التجارية المسجّلة وغير المسجّلة في الولايات المتحدة وبلدان أخرى.
الشروط·الخصوصية·إمكانية الوصول·الدعم
العربية