Design required for timed animations demo page
The demo page for the timed animations API I'm working on needs a better design. The status quo more or less shows what the API exposes:
Basically the demo needs three things: an animatable widget, controls for the animation, and settings for the animation.
Animatable widget
It would be ideal to showcase different properties being animated, such as color, position, rotation, opacity, scale, etc. The current demo shows a green blob moving horizontally through the window
Controls
- Cancel: stops the animation and reverts it to the first frame
- Stop: stops the animation at whatever frame it is
- Play: starts o resumes the animation
- Pause: pauses the animation. Only a paused animation can be resumed. In the current demo we have a combined play/pause button
- End: stops the animation and jumps to the last frame
Settings:
- Repeat count: The number of times the animation will play. If set to -1 it'll play indefinitely
- Reverse: Reverses the animation
- Alternate: When Repeat count != 1, the animation will switch direction at each iteration
- Duration: Duration in ms of the animation
- Interpolator: Ease-in, ease-out, ease-in-out
cc. @bertob