What do you want to achieve? Keep it simple and clear!
I want to know how Roblox has made.his GuiAnimations. A example is the Enum.EasingStyle.Bounce.
What is the issue? Include screenshots / videos if possible!
I have no specific answer
What solutions have you tried so far? Did you look for solutions on the Developer Hub?
I look in the Web.
Thanks for reading my topic.
I don’t really understand you. But if I know what you mean, you use tweenservice:
local TS = game:GetService("TweenService")
local Info = TweenInfo.new(timetocomplete, easing style, easing direction, how many times to
repeat, reverses or not, how many seconds to wait before playing)
TS:Create(UIElement, Info, Color3, Udim2 or whatever{value})
EasingStyles are essentially instructions to apply math calculations for rate of change that determine how an alpha value (or other parameter) reaches its new goal. You can represent each EasingStyle with a graph. Roblox doesn’t make these exactly.
Essentially when you specify an EasingStyle, you’re passing some information along internally that you want your property tweened a certain way. The function then accepts this and applies a formula to generate the intermediate numbers, which are gone through during the tween.
I find that this is a good reference for easings:
I’d recommend researching animation easing. If you’re just looking for more control you can use TweenService as recommended above. If you’re looking for how it works just because you’re interested it basically works like this:
There’s an alpha value which is a number from 0-1 representing the “completeness” of an animation. The actual styles themselves are some equation (that can be graphed). These graphs are intended to work from 0-1 (but can technically go further). Basically Roblox is is positioning the “end point” on the graph with the end value and the “start point” aka y intercept with the initial value. The y value of the graph sort of acts as a new alpha value which is used with a linear transition.
Do you wan’t to know how ROBLOX has made those animations?
Well, here i got some images from Moon Animator:
No, let say i tween a Gui with a EasingStyle. This is a Gui Animation. Ok: How can i MANUALLY Write (without the TweenService or the TweenPosition or TweenPositionAndSize or TweenSize Functions.)?
Yes, i mean this! But can you explain how to calculate this? Let say how to calculate the Ease/Sine.
Edit: How to calculate the Bounce?
I don’t know what do you mean, but i think that when that i line is more at the Top/Bottom, the animation will run more slower.
How can i calculate the Bounce Mouvement?
Here’s a github link that has the code behind every easing style. https://github.com/EmmanuelOga/easing/blob/master/lib/easing.lua
Also, if i’m correct, some of the easing styles are made with cubic bezier curves. You can learn about them here
Cubic bezier curves are made with 4 points, named p0, p1, p2 and p3. P0 is the start, P3 is the end, and P1 and P2 are “hidden” points. From the link @PostApproval provided, the easing styles made with bezier curves have this:
The numbers inside the cubicbezier are the relative positions for p1 and p2
Ok, can i modify the numbers inside cubicbezier?
