⚠ This article covers a previous version of Simple Animation. The basics stay the same but class names have changed.

In this educational article I want to cover a real world problem. Imagine we have a button. The user clicks the button and into transforms into a progress indicator because we are loading something. After things are loaded we transform it into a success indicator. Here is how it looks like:

Button with integrated progress indicator.

As we are actively waiting for a certain condition (stuff is loaded) we can start an animation and tween to the progress indicator. We wait until the desired condition occurs. Then we start a second animation that tweens to the success state.

Due to both animations share same widgets (i.e. width or background color) we can’t just display the first animation exclusively and then the second one. We need to connect the animations.

I created an overview about what’s going on:

Overview of the animation. Always helpful.

On the bottom you can see a property called “Child Index”. I will show you how to use tweening techniques to access independent child sub-trees.

Also we need be aware that the animation displays correctly if the loading is faster then our first animation. Like this: