How do I tween BackgroundColors?

Help and Feedback Scripting Support
#1

I’m not really sure where to start on when attempting to Tween Background Colors or Colors in general. So how would I tween a Color from Color1 to Color2? For instance, Black to White?

1 Like
#2

We can describe color as a matrix of 3 alpha colors. That being red, green, and blue. From there we can simply tween these values like we would for ordinary numbers, reassembling the actual color each iteration of the interpolation

#3

I mean, I was looking for a more simpler explanation but I guess this works.

#4

I try and not give out code on here but rather guide people to a answer

#5

I mean I’m aware of the RGB system roblox uses. I was looking for the actual code guidance. I don’t understand how it works at all and I don’t believe there is tutorials on this specific topic.

#6

Color3.new() is the actual color datatype, taking 3 parameters of uniformed values ranging from 0 to 1. 0 representing no color, or just 0 in rgb encoding and 1 representing 255 in rgb encoding.

#7

So how would I implement this into TweenInfo.new?

#8

Do you understand how to tween numbers?

#9

Not at all, that’s where I am trying to get to.

#10

I see, I could tell you here but I think the wiki could explain it better than I can. Here is the link to the docs but if you still dont understand you can DM me further questions TweenService | Documentation - Roblox Creator Hub

#11

I reccomend editing the post you just sent, could get flagged.

#12

You could use TweenService to tween the background color (TweenService works in any script, like LocalScripts.) Here’s an example:

local part = workspace.Part -- object to animate, does not have to be a part. it can be anything
local tweenService = game:GetService("TweenService") -- get tweenservice service
local tweenInfo = TweenInfo.new(
1, -- time in seconds for tween
Enum.EasingStyle.Sine, -- tweening style
Enum.EasingDirection.Out, -- tweening direction
0, -- times to repeat (when less than zero the tween will loop indefinitely)
false, -- reverses
0, -- delay time
)
local property = {Position = Vector3.new(0, 0, 10)} -- property name and property value (be sure to place in table)
local tween = tweenService:Create(part, tweenInfo, property)
tween:Play() -- plays tween
1 Like
#13 
local gui = script.Parent
wait(2)
gui.BackgroundColor3 = Color3.FromRGB(0,0,0) --change it to black
local tweenService = game:GetService("TweenService") 
local tweenInfo = TweenInfo.new(
5, -- time in seconds for tween
Enum.EasingStyle.Sine, -- tweening style
Enum.EasingDirection.Out, -- tweening direction
0, -- times to repeat (when less than zero the tween will loop indefinitely)
false, -- reverses
0, -- delay time
)
local property = {BackGroundColor3= Color3.FromRGB(255,255,255)} 
local tween = tweenService:Create(gui, tweenInfo, property) --tween it to white
tween:Play() -- plays tween
#14

As @Script_Development said, you’d just need to change the Color property in TweenService, It’s the same thing as all the other stuff, such as changing Size,position (etc…)

With a simple script you can do that, here’s an example of me doing it with a part in workspace.

Script:

local Part = game.Workspace:FindFirstChild("ayu") -- I'm changing this part
local TweenService = game:GetService("TweenService")

script.Parent.MouseClick:Connect(function()
	local Tween = TweenService:Create(Part, TweenInfo.new(3), {Color = Color3.new(0, 0, 0)}) -- Here I change the Color property to (0,0,0)
	
	Tween:Play()
end)

I also recommend checking out the TweenService and TweenService:Create article in the Roblox API.
Hope this helps!

6 Likes
#15

Change “0, – delay time” to:

0 -- delay time