Hello! In this tutorial, I will be showing you how to create a gradient border that moves on any GUI just like the one below!
Create a background frame where you want the moving border to be like the one below. You may use any UICorners/any UI designing things you want to it. For this tutorial, I will be using a UICorner.
Create a UIGradient to how you would like the border to look like (example below).
Create an inner frame, button, or any type of GUI that will be the main GUI under the border and make sure to leave some edges on the side (I used an UICorner and UIGradient in the example below.
You’re getting there! Here’s the fun part! Insert a LocalScript under the border frame and insert the following code below! The code below also has comments on how each line works.
local currentrot = script.Parent.UIGradient.Rotation -- Gets the initial rotation of the UIGradient
local TweenService = game:GetService("TweenService") -- Gets the Roblox TweenService to move things smoothly.
local TweenInformation = TweenInfo.new(2, Enum.EasingStyle.Linear,Enum.EasingDirection.In,-1,false) -- This creates the TweenInfo. The parameters are in the following order: TimeToTween, EasingStyle, EasingDirection, RepeatCount (-1 for infinite), and reverses.
local Goal = {Rotation = currentrot + 360} -- This is our goal for the tween. 360 makes the rotation go an entire circle.
local Tween = TweenService:Create(script.Parent.UIGradient, TweenInformation, Goal) -- Creates the tween and the parameters are: UIGradient (object) location, TweenInformation, and Goal.
Tween:Play() -- Plays the Tween
Now, try it out by play-testing! Enjoy! Please give me any feedback or ask me any questions in the replies! Thanks for reading!
If you really like this tutorial, why not go a step further and make your GUI even more advanced? Instead of only shrinking the frame size, follow this tutorial for the perfect border!
*Credits to @nana_kon for telling me about this! *
local speed = 1 -- Revolutions per Second
game:GetService("RunService").Heartbeat:Connect(function(deltaTime)
script.Parent.UIGradient.Rotation += (speed*deltaTime*360)
end)
Correct me if I’m wrong but that code seems to be creating a new tween every heartbeat. There’s a good chance that can cause a memory leak. It seems a little unnecessary when you can use TweenService’s built in method of looping the tween to achieve a very similar effect.
local currentrot = script.Parent.UIGradient.Rotation
local TweenService = game:GetService("TweenService")
local TweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quint,
Enum.EasingDirection.In,-1,true)
local Goal = {Rotation = currentrot + 360}
local Tween = TweenService:Create(script.Parent.UIGradient, TweenInfo, Goal)
Tween:Play()
Great tutorial! I would recommend to also explain the script, since most people that need this tutorial are most of the time beginners and would also like to know how the script works, that way they get a better understanding of Lua.
*
