I made this post to help programmers frequently using TweenService optimize their code, as well as helping them understand how interpolation and lerping works. I Hope you’ll find this post useful
Interpolating more objects' properties at once
When using TweenService, you create a new thread each time you play the tween - using this method on more objects at once may impact performance.
A quick solution is using a while loop.
This solution yields and is especially useful for when you need to wait for the tween to end before performing a new task. If you want it not to yield, you can just wrap it into a coroutine, creating a new thread, which is still better than creating one for each object.
Here’s how you can tween the transparency of a number of objects, using linear interpolation (aka EasingStyle), without the use of TweenService:
Code
--- an array of objects you want to tween
local objects = workspace.Objects:GetChildren()
--- the time it takes to fully tween the properties
local timeDuration = 10 -- can be any number
local startTick = tick() -- you can use any type of global for getting the time, like os.clock()
--- the start and end values of the objects
local startValue, endValue = 0, 1
--- looping until the time's up
while tick() - startTick <= timeDuration do
--- looping again through all objects
for i = 1, #objects do
--- changing the transparency of them (I'll explain the equation in a few moments)
objects[i].Transparency = startValue + ((endValue - startValue) * (tick() - startTick) / timeDuration)
end
--- waiting so it doesn't crash, you can also use RunService's (.event) :Wait() for smoother transactions, though I suggest just going for wait()
wait()
end
--- sometimes it doesn't finish interpolating until the end, as tick() overshoots the time without being equal to it
--- this is why it's good to make sure that the you finish by changing the property to the endValue
for i = 1, #objects do
objects[i].Transparency = endValue
end
To break down the equation for interpolation, we have 3 variables: a, b, alpha
a - is the start value (startValue)
b - is the end/goal value (endValue)
alpha - is a number between 0 and 1 which determines how far between a and b the number returned is ((tick() - startTick) / timeDuration)
e.g.
e.g.: if alpha is 0.5, the number is half way between a and b, so if a = 0 and b = 3 then the number returned would be 1.5; if alpha = 0.25, a = 0, b = 4 the number returned would be 1 - a quarter away from a to b.
(I hope this helped, if you still have questions regarding this, feel free to ask )
PS: You can, of course, use any other values than 0 for the start value, but I used it as it’s easier to visualize how it works
We determine alpha by using (currentTime - startTime) / duration
Now that we got over the theoretical explanation, what about writing the formula?
a + (b - a) * alpha
The way it works is that you add the startValue (a) to the difference between the startValue and endValue (b-a), which difference is multiplied by alpha, being a number between 0 and 1, so (b-a) * alpha cannot be lower than 0 or greater than b-a.
In the end, the returned value cannot be lower than a <= (a + 0 = a) or higher than b <= (a + b - a = b)
Interpolating other properties than numbers (using Lerp)
Some of you might be wondering how we can tween properties that aren’t numbers, and for that Roblox has offered us a solution: Lerping
Properties such as Color3, Vector3, Vector2, CFrame, UDim and UDim2 have a function called :Lerp() that lets us easily interpolate between numbers:
Code
Example from above:
object.Transparency = startValue + ((endValue - startValue) * (tick() - startTick) / timeDuration)
a + (b - a) * alpha
Changing the Color:
object.Color3 = startValue:Lerp(endValue, (tick() - startTick)/timeDuration)
a:Lerp(b, alpha)
Interpolating using other easing styles
TweenService has yet another useful function called :GetValue() which can be used to get a new alpha, depending on the easing style you’re looking for.
How to use it:
--- getting the new alpha depending on the easing style and easing direction (I'm using Bounce and Out, but these can be changed)
local newAlpha = TweenService:GetValue((tick() - startTick) / timeDuration, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out)
-- using the newAlpha for interpolation
object.CFrame = startValue:Lerp(endValue, newAlpha)
PS: As you’re using the variable only once, I suggest that you instead just put it inside the :Lerp function like this:
object.CFrame = startValue:Lerp(endValue,
TweenService:GetValue((tick() - startTick) / timeDuration, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out)
)
Hopefully you found this useful and learned something new
For any suggestions or questions, comment below! I’ll try to help as much as I can