Is there anyway to tween gradients?

Help and Feedback Scripting Support
#1

Hello!

I was wondering if there is anyway to tween gradients, and if someone can help me do so…

For context, I am making a shop UI and there are different tool rarities, and when someone clicks on a certain rarity, the gradient will change to the rarities colours.

Can someone help me make this please?

Anything will help - thanks!

Tween help PLEASE
#2

How are you currently making the gradient?

#3

Do you mean something like this?

I made a rudimentary script using UIGradient and lerp.

local GradUI = script.Parent
local TextUI = GradUI.TextLabel
local Grad = TextUI.UIGradient
local frames = 50
local speed = 0.01

function colour_change(colour, keypoint)
	local originalColour = Grad.Color.Keypoints[keypoint+1].Value
	local sequence
	for i=frames,0,-1 do
		wait(speed)

		local x = math.sqrt((i-frames)^2)/frames
		
		if keypoint == 0 then
			sequence = ColorSequence.new{
				ColorSequenceKeypoint.new(0,originalColour:Lerp(colour, x)),
				ColorSequenceKeypoint.new(1,Grad.Color.Keypoints[2].Value)

			}
		else
			sequence = ColorSequence.new{
				ColorSequenceKeypoint.new(0,Grad.Color.Keypoints[1].Value),
				ColorSequenceKeypoint.new(1,originalColour:Lerp(colour, x))

			}
		end
		
		Grad.Color = sequence
	end
end

wait(30)
colour_change(Color3.new(1, 1, 1), 0)
wait(0.5)
colour_change(Color3.new(0, 2/3, 1), 1)
wait(0.5)
colour_change(Color3.new(1, 1, 0), 0)
wait(0.5)
colour_change(Color3.new(0,0,0), 1)
wait(0.5)
colour_change(Color3.new(0,1,0), 0)
wait(0.5)
colour_change(Color3.new(0,0,1), 1)

You could apply the same function for a set number of colours/variations.

2 Likes
#4


If you want to make a UI glint effect that could look like this, just put a UI gradient behind some text and do something along the lines of this:

local OFFSET_SPEED_X = 1 -- units per second
local uiGradient = script.Parent
local RunService = game:GetService("RunService")
 
local function onRenderStep(deltaTime)
    local currentOffsetX = uiGradient.Offset.X
    if currentOffsetX < -1 then
        uiGradient.Offset = Vector2.new(1, 0)
    else
        uiGradient.Offset = Vector2.new(currentOffsetX - OFFSET_SPEED_X * deltaTime, 0)
    end
end
 
RunService.RenderStepped:Connect(onRenderStep)

I took this from developer.roblox.com, so here is what the supplied code will look like

4 Likes
#5

When the player opens the shop, the default gradient will be like blue and light blue, but when they open a certain section in the shop, the gradient will change to like red and orange and stay that way.

#6

Something like this?

local GradUI = script.Parent
local TextUI = GradUI.TextLabel
local Grad = TextUI.UIGradient
local frames = 50
local speed = 0.01

function colour_change(colour1, colour2)
	local originalColour1 = Grad.Color.Keypoints[1].Value
	local originalColour2 = Grad.Color.Keypoints[2].Value
	local sequence
	for i=frames,0,-1 do
		wait(speed)

		local x = math.sqrt((i-frames)^2)/frames
		
		sequence = ColorSequence.new{
			ColorSequenceKeypoint.new(0,originalColour1:Lerp(colour1, x)),
			ColorSequenceKeypoint.new(1,originalColour2:Lerp(colour2, x))

		}
		
		Grad.Color = sequence
	end
end

colour_change(Color3.new(0.985962, 0, 0.0469215), Color3.new(0.993957, 0.703929, 0.0368811))
3 Likes
#7

Yeah it’s supposed to run on a MouseButton1Click function, when the player opens the next menu/gui. Thank you for this, will be trying it soon! :smiley: