Sunday, April 08, 2007


One of the more frequent questions that I see is how to do interesting transition effects for applications. So here's how, first of all prototype your algorithm. Here we're going to use a page folding to visualize transitions as turning of pages. So that it looks like this:

Then we figure out how to adopt it to application. The trick is how to get contents of an application without extra repaints. In Qt the contents of top-level's is buffered and there is a private but exported way of fetching that contents (not fully platform independent at the moment). The example #2 shows how to grab the contents of the window without extra repaints and copies and use it to implement the effect, so it looks like this:

The forms were taken from Kate config dialogs so they're real config pages (hence also why they're, well, not too pretty). The effect is fully animated so to get a better idea of how it looks you'll have to look at the ogg file provided here. It's also worth noting that this effect is very efficient and works smoothly with virtually 0 cpu usage.

As mentioned in the last blog, to see more examples and code for this one visit Graphics Dojo. The above mentioned examples are at the examples 2 page.


Tobias Rundström said...

the folder example doesn't compile!

folder.cpp:5:38: error: private/qwindowsurface_p.h: No such file or directory
folder.cpp: In member function 'void Folder::updateCache()':
folder.cpp:167: error: invalid use of undefined type 'struct QWindowSurface'
../../qt4.3/lib/QtGui.framework/Versions/4/Headers/qwidget.h:75: error: forward declaration of 'struct QWindowSurface'


Zack said...

yeah, it does, but like i said it depends on private (but exported) class in Qt. Which one should be very clear from the error message.

Anonymous said...

You need to install the Qt sources, compile them in place (don't rely on installed headers), and then compile the example using that Qt install to make it work... iow, it doesn't compile out of the box, since Qt doesn't install private headers, or support using them. :-)

Zack: Cool effect :-).

b10663r said...

Zack, it seems what we really want is a 'Tween engine, like in flash. If we were to amass a library of tweens (like page flip, fade, rotate, scale), and a widget to operate on, I think we'd be in excellent shape.

Tweens work basically by identifying a property (of a specific widget) to operate on and a begin state (or current) and an end state. Then this is linearly interpolated between start and end over the duration.

The only thing that is left is a time line where tweens are scheduled to start at a time, or upon some signal (i.e. click event)

A scale event (both H and W) would be two tweens who start (and end) at the same time. Any numeric value can be tweened. (A few non-numeric values can be tweened, but such is not often used.)

Unknown said...

it's pretty cool effect, but the fold should be mirrored, no?

Pasi said...

Is the source code for this example still available somewhere?