Saturday, September 08, 2007

Creating transitions with GTK+

Anyone knows that creating transitions (animations) using GTK+ is not the easiest thing to do. So after some discussions with Renato we came up with a API to make it easier.

So today I sat down and wrote GtkTransition, a class written on top of GtkTimeline [1] that allows you to create transitions as natural as it can be. It's similar to what Flash does to create animations, but with some small differences.

Basically you create a transition with an interval (eg. 2 seconds) and add states for this transition. States work directly on objects properties, so you can say for example, create a state that will complete when the transition reaches 50% that will set the label angle from 0 to 360 degrees. After that create another state that will complete on 100% of the transition that will set the same angle from 360 to 0 degreess and depends on the first state (it will start after the first state has completed).

The code looks something like:

transition = gtk_transition_new (2000);
gtk_timeline_set_loop (GTK_TIMELINE (transition), TRUE);

state1 = gtk_transition_state_new (G_OBJECT (label));
gtk_transition_state_set (state1, "angle", 0.0, 360.0, NULL);
gtk_transition_add_state (transition, state1, NULL, 0.5);

state2 = gtk_transition_state_new (G_OBJECT (label));
gtk_transition_state_set (state2, "angle", 360.0, 0.0, NULL);
gtk_transition_add_state (transition, state2, state1, 1.0);

gtk_timeline_start (GTK_TIMELINE (transition));

The code is not complete yet, but you can grab it with:
$ svn checkout http://andrunko.googlecode.com/svn/trunk/gtk

There is a test1.c that shows the code to rotate the label, and test2.c that translate and resize a GooCanvasItem (you need goocanvas [1] to compile it)

Patches and ideas are welcome!

Hope you enjoy

[1]
http://bugzilla.gnome.org/show_bug.cgi?id=444659
[2]
http://sourceforge.net/projects/goocanvas

Edit: updated code snippet

8 comments:

jon1012 said...

Having developed Appliworks (a gnome image and gallery viewer) with gtk a while ago I was really missing an api like that !

Great to hear someone is finally doing it :)

If it evolves nicely, I may restart devel of this app !

Andre Moreira Magalhaes (andrunko) said...

@jon1012: tnx for the feedback, it's really appreciated. The idea is to continue the development and perhaps in the future have it integrated in GTK+

Jack Chrysler said...
This comment has been removed by the author.
95dbb850-4ccf-11e0-9cfc-000bcdcb5194 said...

This research is very impressive they can do many aspects of each elements. I've been on the lookout temporarily for finding a decent case study with reference similar to this unique idea. Off The Plan Apartments Melbourne

Hair Transplant in turkey said...

Comments made ??about the issues impressed me. I like your site.
fue fiyatları istanbul

Algevis said...

A very nice page. I think the effort has passed, we have to thank you:))
Estetik Diş Doktoru

Op Dr Ali Mezdeği said...

Site's character and a great color match .. I will recommend your site to the other platforms.
Saç Ekimi

Unknown said...

The idea is to continue the development and perhaps in the future have it integrated in GTK+Jinekomasti