Thinking about animation in the Hippo Canvas

Currently I'm looking into adding a little bit more excitement to the
online desktop visuals. Part of that is animation.

There are two basic forms of animation that fit easily into the model of
the HippoCanvas:

 A) Some property of an item is changed in a continuous matter over
    time. For example, we could blink an item by changing it's CSS
    class back and forth between two values.

    Animating motion of a fixed-position child item by changing it's
    x/y position also fits into this category.

 B) We can animate a transition between two states. If the requested
    size of an item changes, instead of popping it to the new size,
    we could gradually expand it to the new size.

    If the displayed contents of an item changes, we could cross-fade
    between the two sets of displayed contents, by rendering the
    new and old contents into off-screen surfaces and then 
    interpolating between them.

In many cases, we'd want to combine these techniques ... for example,
grow space for an inserted item, fade the item into the space, and then
blink it a few times to alert the user.

(The attachment to
is a mockup that Bryan Clark did of something like that.)

For B) I'm thinking of something like:

 void hippo_canvas_box_animate_transition(HippoCanvasBox  *box,
                                          double           resize_start,
                                          double           resize_time,
                                          HippoCanvasAlpha resize_alpha_func,
                                          double           fade_start,
                                          double           fade_time,
                                          HippoCanvasAlpha fade_alpha_func);

Borrowing the term "alpha" from clutter for the "acceleration curve" for the

Used like:

 item = [create item];
 parent.insert_after(item, prev); # initial size is 0
 item.animate_transition(0,    0.5, hippo.ALPHA_SINE,
                         0.25, 0.5, hippo.ALPHA_RAMP);

Which would grow a blank space for 0.25 seconds, and at 0.25 seconds start
fading the item in, at 0.5 seconds, the growth stops, but the fade in 
continues for 0.25 seconds longer.

Though it seems like you might want a simpler version where you just gave
a total length and the canvas figured out the details.

For A) maybe something like:

 void hippo_canvas_box_animate_discrete  (HippoCanvasBox *box, 
                                          const char     *property_name, 
 void hippo_canvas_box_animate_continuous(HippoCanvasBox *box, 
                                          const char     *property_name, 

Where you define a timeline of property values, and for the continuous case,
specify alpha types for the transition between them.

                      0.75, "person-item-prelighted",
                      1.00, "person-item",
                      1.25, "person-item-prelighted",
                      1.50, "person-item",

Or for the continuous case:

                        0.75, 0x00000000, hippo.ALPHA_RAMP, # transparent
                        1.00, 0xffbb00ff, hippo.ALPHA_RAMP, # yellow
                        1.25, 0x00000000, hippo.ALPHA_NONE, # transparent again

Certainly the above API sketch is far from completely general, but it would
allow a reasonable range of effects. 

- Owen

Attachment: signature.asc
Description: This is a digitally signed message part

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]