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

In this article I want to show you, how to use the simple_animations package for creating custom animated control elements.

Checkbox-like UI control

This “form control” acts like a checkbox but it has a cool switch animation. During the animation it changes four different properties:

left padding : it’s moving from left to right,

: it’s moving from left to right, rotation : from -360° (=-2*pi) to 0° (=0pi),

: from -360° (=-2*pi) to 0° (=0pi), color : grey to blue,

: grey to blue, text string: changing “off” to “on” in the middle of the animation.

Also we need the checked state (Is the checkbox currently checked?) as an input property to control the animation.

We simply define the animation by using a MultiTrackTween (Animatable that tween multiple properties at once). We pass this tween into a ControlledAnimation (widget for simple tween-based animations).

We will bind the checked input property to ControlledAnimation’s playback and startPosition property:

playback: checked ? Playback.PLAY_FORWARD : Playback.PLAY_REVERSE,

startPosition: checked ? 1.0 : 0.0,

Whenever the checkbox get checked it assures that it plays the animation forward at stops at the end. When it gets unchecked it animates backwards and stops at the beginning.

The property startPosition specifies the initial animation position of the widget. If the checkbox is checked at the beginning we want our initial animation position at the end ( 1.0 ).

Note: startPosition got introduced with simple_animations 1.1.0

Here’s how the first part of the code looks like: