Android Code Snippet Animation easing functions

After having seen the first post of this tread: My favourite animation trick: exponential smoothing.
I decided to make a B4XPages project for the different easing functions and posted it there.
The source of the equations comes from this site: Easing Equations
Then, I was suggested to post it here because the other thread is in the Chit chat forum.
I did not remember that these equations were already converted to B4X by @epiCode in the thread Easing Functions.

I have used this kind of animation in the xRotaryKnob library, but inspired by a code from Erel in the Gauges thread.

With the CSpline and CBezier easings you can move the green and red handles to modify the curves.
With the CSpline easing you can do some 'exotic' easings.

To use only one equation you can change it in the AnimateTo routine.
The commented line is specific for CubicTimeEaseInOut.
These two lines are also not needed:
DrawMovingDot(DateTime.Now - BeginTime, Duration)
cvsMovement.ClearRect(cvsMovement.TargetRect)

    Private CurrentPosition As Int
    Private BeginTime As Long = DateTime.Now
   
    CurrentPosition = MoveTo
    Dim tempValueA As Float
    Do While DateTime.Now < BeginTime + Duration
        tempValueA = CallAnimation(DateTime.Now - BeginTime, MoveFrom, MoveTo - MoveFrom, Duration)
'        tempValueA = CubicTimeEaseInOut(DateTime.Now - BeginTime, MoveFrom, MoveTo - MoveFrom, Duration)
        DrawCircle(tempValueA)
        Sleep(5)
        If MoveTo <> CurrentPosition Then Return 'will happen if another update has started
   
        DrawMovingDot(DateTime.Now - BeginTime, Duration)
    Loop
    DrawCircle(CurrentPosition)
    cvsMovement.ClearRect(cvsMovement.TargetRect)

 

[fredo]

...to make a B4XPages project for the different easing functions...

Once again, an excellent code snippet from you! Clear and easy to follow.
Thanks for your consistently helpful contributions.

 

[TILogistic]

A few years ago I researched how to make animations in my applications.
Here are some other tutorials that will be of interest to some.

tutorial:

Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt

Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matching equation and learn how to use it in your own...

spicyyoghurt.com

online tool

Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.

matthewlein.com

cubic-bezier.com

https://easings.net/en

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

 

[klaus]

I have played a bit further with this program, updated in the first post.
I have added CSpline and cBezier easing curves and a graphic showing all the different curves.