For this example we are going to animate a rectangle growing, moving and changing color, and then move it back to it's initial state with a different animation. We are also going to have a second rectangle moving along the bottom of the screen. To do this we are going to use ecore_evas, but since that is not the focus here we won't going into detail about it.

Now we are going to set the frametime for our animation to one fiftieth of a second, this will make our program consume more resources but should make our animation extra smooth:

And now we get right to the business of creating our ecore_animator:

Note:

We are telling our animation to last 10 second and to call _advance_frame with rect as data.

So far we setup the first and second animations, the third one however is a bit different, this time we won't use a timeline animation, that's because we don't want our animation to stop:

Next we set a few timers to execute _start_second_anim, _freeze_third_anim and _thaw_thir_anim in 10, 5 and 10 seconds respectively:

And now we tell ecore to begin the main loop and free some resources once it leaves the main loop:

Here we have the callback function for our first animation, which first takes pos(where in the timeline we are), maps it to a SPRING curve that which will wobble 15 times and will decay by a factor of 1.2:

Now that we have the frame we can adjust the rectangle to its appropriate state:

And now the callback that will run 10 seconds after the program starts(5 seconds after the first animation finishes) and starts our second animation:

Note:

For this animation we made the frametime much larger which means our animation might get "jerky".

The callback for our second animation, our savvy reader no doubt noted that it's very similar to the callback for the first animation. What we change for this one is the type of animation to BOUNCE and the number of times it will bounce to 50:

And for our last animation callback something simpler, we just move our rectangle right by one pixel until it reaches the end of the screen and then start at the beginning again:

Our next two functions respectively freezes and thaw our third animation, so that it won't happen for the 5 seconds after the first animation ends and the second animation begins: