Easing Animations and Tweening by ST Aabra

Have something important that other people might find usefull? Well, drop it here and help others!
User avatar
LucidStew
Level 3
Level 3
Posts: 176

Easing Animations and Tweening by ST Aabra

Post#1 » Mon Aug 15, 2016 8:07 am

This is an advanced subject not for the feint of heart but if you learn how to properly implement easing/tweening it will have a drastic effect on the quality of your games. Bezier curves can be used to create professional animations especially for User Interface elements but it is not limited to just the user interface. You can use this to create your own physics when Spark refuses to create the exact effect you want or use it with the scale of a visual effect or prop combined with an in-out formula to make it pulsate. The possibilities are endless. There is extremely complicated math involved in this but the beauty of it all is that you don't need to completely understand it. You simply pick the type of movement you want from the list and the mathematical formula is automatically created for you. You then put that same formula into Spark, provide it with the appropriate variables and you're off.


To first understand what I'm even talking about - check the following link:

http://www.timotheegrole...g_function_generator.htm


Click once on the ball that appears in the app - and then click anywhere else in the app to preview the movement that you have selected. Try out a bunch of the different Easing Presets. Recommended ones are:

In-Out Cubic
Out-Elastic(small)
Out-Quartic

Once you've seen the movement that these formulas can produce - you will not want to go back to default movement which you can also preview with the "no easing" preset.


You may have noticed while changing the presets that the formulas to add this into your own games in spark comes up in the top right hand corner of the app! That's it! That's all you need in order to add these animations into your own games! Every formula requires 4 variables and that's what will initially confuse you when you look at it. Just remember the following:


T = Time (In Frames. Simply increase this by 1 each frame.)
B = Beginning (The initial value.)
C = Change in Value (How much you want the value to change.)
D = Duration (How many frames do you want it to take to complete the animation.)



So say you want to move a UI object on the X axis from a value of -1 to 0.5 and you want it to complete the movement in 30 frames.


B = -1 (where it began)
C = 1.5 (you are increasing the value by 1.5 in order to get to the 0.5 value you want.)
D = 30

T = (starts at 0 - you increase this every frame until it reaches Duration... and then you stop the calculations from occurring.)


A final note is that in the application you will see the syntax t/=d
Note that what this actually means is t=t/d

ts and tc are just temporary variables.


All of this may seem a bit confusing so I highly recommend reading the following which explains it all much more thoroughly.

http://www.robertpenner....er_chapter7_tweening.pdf



This may seem extremely complicated at first but I assure you it's worth it. I sincerely hope some of you are up for this challenge and we start seeing more levels with the high quality animations that these formulas can provide.
End of line.

Return to “Tutorials and guides”

Who is online

Users browsing this forum: No registered users and 1 guest

cron