Why does my Animation goes out of the screen more you click the Button?
Where it is or where I have it game.StarterGui.ScreenGui.Frame & game.StarterGui.ScreenGui.TextButton.Script
The TextButton.Text.Value = Menu
Test Place: www.roblox.com/games/658003394/Open-Close-Animation-Gui-Test-Place
The Script: (Normal)
debounce = false
script.Parent.MouseButton1Click:connect(function()
if not debounce then
debounce = true
if script.Parent.Text == "Menu" then
-- Open function
script.Parent.Parent.Frame.Visible = true
for i = 1,25 do
script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size + UDim2.new(0.02,0,0,0)
wait()
end
for i = 1,8 do
script.Parent.Parent.Frame.Position = script.Parent.Parent.Frame.Position - UDim2.new(0,0,0,0)
wait()
end
for i = 1,20 do
script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size + UDim2.new(0,0,0.0225,0)
wait()
end
script.Parent.Text = "Close"
else
--Close function
for i = 1,25 do
script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size - UDim2.new(0,0,0.02,0)
wait()
end
for i = 1,8 do
script.Parent.Parent.Frame.Position = script.Parent.Parent.Frame.Position + UDim2.new(0,0,0,0)
wait()
end
for i = 1,20 do
script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size - UDim2.new(0.0225,0,0,0)
wait()
end
script.Parent.Parent.Frame.Visible = false
script.Parent.Text = "Menu"
end
debounce = false
end
end)
0
1 answer
Hi, I can see you've done a lot of number crunching to create your GUI, but there is a much simpler way to move GUI's or resize them without using a for loop.
Here's an example of a script I created that moves a GUI from off screen to on screen.
button = script.Parent
shop = button.Parent.Shop
open=false
button.MouseButton1Click:Connect(function()
if not open then
open=true
shop:TweenPosition(UDim2.new(0.5,-250,0.5,-100),"Out","Quad",1)
else
open=false
shop:TweenPosition(UDim2.new(0.5,-250,-0.5,-100),"Out","Quad",1)
end
end)
If you'll notice, instead of using for loops to change the position, I use a cool API called TweenPoisition(). What it does is essentially animate the GUI from where it is to where you give the UDim2.new() position.
Let's say I had a GUI sitting of screen so it's location was (-0.5,0,0,0) and I wanted to move it into view for the player to see. The first step would be to define what the GUI is that you're moving. In my case it's a frame titled Shop.
shop:TweenPosition()
Next you want to give the location that you want it to take the GUI to.
shop:TweenPosition(UDim2.new(-0.5,0,0,0))
That's not all though. We can also set the styles of the wait the GUI eases in our out, or both. As well as setting the EasingStyle for how it'll look sliding. I like to pick Quad for this one. (Here is an animated list Roblox made of all the different easing styles.)
shop:TweenPosition(UDim2.new(-0.5,0,0,0),"Out,","Quad")
You can also set how long it takes for the animation to float to the end point. It's default is one second.
shop:TweenPosition(UDim2.new(-0.5,0,0,0),"Out,","Quad",1)
You can also use TweenSize() to tween the size instead or do both position and size with TweenSizeAndPosition()
You can read more about Tweening on the wiki page here.