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 http://bugzilla.gnome.org/show_bug.cgi?id=532026
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
effect.
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.
box.animate_discrete("classes",
0.75, "person-item-prelighted",
1.00, "person-item",
1.25, "person-item-prelighted",
1.50, "person-item",
-1.0);
Or for the continuous case:
box.animate_continuous("background-color",
0.75, 0x00000000, hippo.ALPHA_RAMP, # transparent
1.00, 0xffbb00ff, hippo.ALPHA_RAMP, # yellow
1.25, 0x00000000, hippo.ALPHA_NONE, # transparent again
-1.0);
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