I’m making a kind of frame to indicate how much strength the player received, I made it in a simple way. it just goes to the desired position in a straight line, as I show in the video below. However, I would like a better animation, something like a curve, but I don’t know how to do it, if someone could give me some help or some tips I would be happy.
So if you’re using TweenService, prepare yourself because this will not be achievable through such a service.
The solution to your problem is literally squaring a number.
local totalTime = 1 -- in seconds
local startingPos = frame.AbsolutePosition-- the starting position!
local finalPos = otherFrame.AbsolutePosition-- the final position!
local s = 0
local diffX = finalPos.X - startingPos.X
local diffY = finalPos.Y - startingPos.Y
while s < totalTime do
-- create our ratio of time (we like numbers between 0 and 1)
local ratio = math.clamp(s / totalTime, 0, 1)
-- Lets square the X axis and leave the Y one alone for this one
-- If you want it to look randomized, you have to choose between the X or Y axis to square
local yPos = startingPos.Y + diffY * ratio -- this is normal
local xPos = startingPos.X + diffX * ratio * ratio -- this is squared!
local currentPosition = UDim2.new(0, xPos, 0, yPos) -- in offset because we're dealing with offsets
frame.Position = currentPosition
s += RunService.Heartbeat:Wait()
end
Essentially what we’re doing here is creating a “speed up” for one of the axes. Lucky for us we can use a rule in math where squaring a number between 0 and 1 will result in another number between 0 and 1. This means that our ratio will always stay within the 0 to 1 boundary that we want. You can think of it like saying “We’re 50% of the way there”, where the 50% is just 0.5 as a ratio.
But what this does visually is instead of linearly transitioning from 0 to 1, our ratio will now exponentially reach from 0 to 1. This all adds up to seeing the curve you’re looking for!
2 Likes
this worked perfectly, thanks for explaining!
1 Like