Animations

Overview

Well, I guess that it is pretty straight forward, that animations are a cool thing. (And MacOS has them.) Richard Stellingwerff has already done some related work, and successfully animates the progress bar in the Clearlooks theme.

For the eXperience engine the animation support should not be restricted to one widget like the progress bar.

I see two possible types of animations:

1. A simple animation, like the animated slider in MacOS.
2. The possibility to fade between different states. This would make it possible to do fancy animations when you hover over a button, etc. One problem with this might be, if someone wants to start a new animation as soon as the mouse hovers over a button.

Technical overview

I guess the system will work something like the following:

• Each group can contain set animation = TRUE. This will result force a redraw of the widget every 200ms (or similar). If the widget cannot be animated (like in OOo and Mozilla) then everything is ignored.
• There is a global timer, that ticks every 200ms. Animated widgets are added into a list and a redraw is forced for each of them (taking the GtkProgress_ weirdness into account)

With this a simple animation is pretty straigt forward. We just force a redraw for all widgets, and delete the list. It will be rebuild automatically when the widgets are drawn again. Adding support for crossfading between states is more difficult. This is because I need to attach state data to the widget. (Need to figure out, how to handle GtkRanges_, which have 3 "buttons" really.) Everything else is pretty similar to the code path for normal animations.

Crossfading example

Simple theme example:

group "button" {
    function = BOX
    state    = NORMAL, PRELIGHT, ACTIVE

    fade_times {
        prelight = 3
        active   = 2
    }

    image 0 {
         #Some base image ...
         file = "button_base.png"
    }
    image 1 {
         #Some prelight image definition, etc.
         file = "button_prelight.png"
         # The opacity is equal to the prelight value. This means the image will be faded in and out
         opacity = prelight
    }
    image 2 {
         #Some active image definition, etc.
         file = "button_active.png"
         # The opacity is equal to the prelight value. This means the image will be faded in.
         opacity = active
    }
}

The simple example would result in something like the following:

[Table not converted]

As you can see, this would for example mean, that the button has the prelight and active state at the same time.

Things that need to be discussed:

• What happens, if the user hovers over the button at 100ms or 150ms? Where is the limit. This might just be some trail and error, and see what feels OK.