PcoWSkbVqDnWTu_dm2ix
Collapse Sidebar
  1. apireference
  2. gui
  3. uigradient

Rotation

UIGradient

float

The Rotation determines the clockwise rotation in degrees of the UIGradient starting from left to right. The beginning and end control points snap to the edges of the parent GuiObject, but maintain the provided rotation.

An animation of a UIGradient's Rotation being animated from 0 to 360

The animation above shows the snapping behavior of the gradient control points. The red indicates the start point, and the blue indicates the end. Although the control points do not move at a constant pace, the angle between them changes at a constant pace.

See Also

  • articles/Applying UIGradients, for more information on creating UIGradient objects and how they work.

  • UIGradient/Offset, which also affects the geometry of the applied gradient

Code Samples

UIGradient.Rotation Animation

This code sample demonstrates a simple animation of the UIGradient/Rotation|Rotation of a UIGradient. Using RunService/RenderStepped, it tweens the property value from 0 to 360 using the deltaTime parameter from the event. This causes the gradient to spin around in a circle.

The animation to the right shows the code sample running on a UIGradient within an ImageLabel.

local ROTATE_SPEED = 90 -- degrees per second
local uiGradient = script.Parent
local RunService = game:GetService("RunService")
 
local function onRenderStep(deltaTime)
    local currentRotation = uiGradient.Rotation
    uiGradient.Rotation = (currentRotation + ROTATE_SPEED * deltaTime) % 360
end
RunService.RenderStepped:Connect(onRenderStep)