Animated transitions between decoration states

[mgarin]

Decoration-based styling system will be out and live soon, but it still requires one big addition - animated transition between the states. This feature will allow you to provide short transition animation description within decoration states to enable animated transitions.

Here is a small theoretical example of how it will look like for the button:

    <style type="button">
        <painter class="WebButtonPainter">
            <decorations>
                <decoration round="3">
                    <BasicShade type="outer" width="2" />
                    <LineBorder color="170,170,170" />
                    <GradientBackground type="linear" from="0,0" to="0,1">
                        <color>white</color>
                        <color>223,223,223</color>
                    </GradientBackground>
                    <Animate to="pressed" time="100" fps="60" />
                </decoration>
                <decoration states="focused">
                    <BasicShade type="outer" color="85,142,239" />
                </decoration>
                <decoration states="pressed">
                    <BasicShade type="outer" transparency="0" />
                    <BasicShade type="inner" width="5" />
                    <ColorBackground color="210,210,210" />
                    <Animate time="400" fps="60" />
                </decoration>
                <decoration states="disabled">
                    <BasicShade type="outer" transparency="0" />
                    <LineBorder color="lightGray" />
                </decoration>
            </decorations>
        </painter>
    </style>

This describes two simple animations:

1. Quick animation for button press
2. Long animation for button release

The way transition is performed will be described within each separate part of the decoration - shape, shade, border, background etc. If some parts do not support it they will simply ignore animation requests.

Separate animation pipe (thread) is probably required to efficiently implement this feature without creating huge amount of threads to animate each separate part of the decoration.

[mgarin]

There have been a big update for this major feature - I had some parts of the animation system in development in my local project and I decided to push them to the styling branch so that they make it to the v1.2.9 update.

The reason behind this is that some parts of the UI - like indeterminate progress bars - had to be animated to provide appropriate visual representation of the component state. There are also quite a few cases in which transitions will be really useful to simplify the code and avoid performance issues.

So instead of writing more workarounds for all those cases I decided to include basic parts of animation system coming in v1.3.0 into this release. Though it is only a small part that provides transitions and easing API and it is not yet integrated with the styling system - that integration is a big feature that will only appear in v1.3.0.

Articles covering new APIs and features will soon be added in the wiki. I'll post a separate update here as soon as those are available.