So i wanted to make a loading animation like the Windows 10/8 loading circle (like that). So how would i do that?
Could you try a single dot GUI that rotates in that animated fashion, layered with a few others that are set a few degrees ‘later’ in the rotation?
It’d be better if you could provide what you’ve tried so far, that way we can be more helpful.
Here’s an example script that creates a round frame and rotates it in a circular motion (put it in StarterPlayerScripts
and make sure you use a LocalScript
):
local run = game:GetService("RunService")
local range = 100 -- Range of rotation
local speed = 5 -- Speed of rotation
local offset = 300 -- Position offset from the top-left corner
local gui = Instance.new("ScreenGui", game:GetService("Players").LocalPlayer.PlayerGui)
local frame = Instance.new("Frame", gui)
local uiCorner = Instance.new("UICorner", frame)
uiCorner.CornerRadius = UDim.new(1, 0)
frame.Size = UDim2.fromOffset(30, 30)
frame.BackgroundColor3 = Color3.new(1, 1, 1)
run.Heartbeat:Connect(function()
local t = tick()
local xPos = offset + math.sin(t * speed) * range
local yPos = offset + math.cos(t * speed) * range
frame.Position = UDim2.fromOffset(xPos, yPos)
end)
I’m not good at explaining (especially math stuff) but it uses math.sin
and math.cos
, when passed tick()
, they both return a Number from -1 to 1, if we multiply the result by let’s say 100 we get a number from -100 to 100, that’s how we define a range, to control the speed we can multiply the value returned from tick()
by some number.
Alternatively, you could also use Bezier Curves to define custom path
so i tryed TweenService but it doesnt work couse it warps the Frame i try to tween
What about my script? Is that the behavior you’d like?
kinda but i want it to slow down as it comes down again and then come nearly to a full stop and then start again.
I don’t have enough time to code that whole thing but you could figure it out yourself, add this code after the variable t
, that way you can check if the circle is up or down and adjust the speed accordingly:
if math.cos(t * speed) > 0 then
print('down')
else
print('up')
end
it gets all weird and glitchy if i do that