Welcome to Kinetic

For the last year or so, several trolls have worked on ramping up Qt's GUI capabilities by adding features and flexibility to our widget model, extending Qt with an animation framework, and investigating internal changes to our graphics system to meet the demand for highly animated GUIs (including excessive use of OpenGL). Some of the graphics improvements are merged into Qt 4.5, and available in snapshots. Today we're sharing the rest of our code with you all, so you can see what's going on.

* Labs project page:
* Git clone URL: git://

The name of this project is "Kinetic". Our goal is to make it easier for you as a developer to create highly animated, high-performance GUIs, without the hassle of managing complex structures, timers, and easing curves, not to mention the large state graphs that all animated GUIs tend to be full of. We're investigating building blocks that you need in order to make the simple things easy, and everything else possible. Some parts are C++, some parts are XML.

We'd like to bring out the best from every good animation framework out there, and look for a way that makes animations fit neatly into Qt. If we can make an animation API that looks like it has always been there, and which inspires you to add nifty animations to your applications, then we have been successful.

For example, if you'd like to define two states for a widget's geometry and an animated transition, you might do this:

QStateGroup *group = new QStateGroup;
QState *a = new QState(group);
QState *b = new QState(group);

a->setGeometry(w, QRect(100, 100, 200, 200));
b->setGeometry(w, QRect(200, 200, 150, 150));

QTransition *transition = new QTransition(a, b);
transition->addAnimation(new QAnimation(w, "geometry"));

Performance is extremely important; especially when the elements that define your UI suddenly rely on it. A sluggish animated UI is hopeless and defeats the purpose of having animations in the first place. It's amazing how a slow animation can turn a good experience into a bad one. Kinetic places a whole new set of requirements on our graphics system. Performance starts with graphics hardware capabilities at one end of the scale, and "do what I mean" on the other end of the scale. There's work to be done in between. We need to find ways to ensure that new UI effects are as pleasing to the eye as they are to the developer.

As for graphical effects; you might have seen recent posts from the Graphics Dojo about how cool effects are possible to do using Qt today. As part of Kinetic, we'd like to investigate how these effects can integrate neatly into the UI framework. Can we add composition effects like blurring, dropshadows, blooming, colorizing (e.g., backdrop darkening, fading from white, etc.), while keeping the APIs easy to use and the performance at 100%?

Our widget model poses some restrictions on animations. We'd like to "break out of this box". We're investigating how Graphics View can loosen up some of the basic constraints by allowing widgets to be scaled, rotated, faded and blurred. For the end user, a standard form looks the same by itself or embedded in Graphics View. But once you can combine widgets with custom items, and add animations and effects to the puzzle, we think you can create magic. In C++ all the details are exposed, but with XML it doesn't have to be. We're investigating how to evolve our UI format, which has essentially been the same for many years. Let's face it... it's time for a workout. We're making a different format now, that has the same expressive power as the .UI format, but also allows you to embed states and animated transitions. This final part of the project is called "Declarative UI".

Here's a sample XML file that describes a simple animated UI (as a png because I can't get Wordpress's verbatim and pre tags to do what they should!).


So, please take this as an invitation to join us. You can find the new project on Labs and a Qt Solution for the Animation Framework in usual pages. There's not a lot of bling there yet, because at this point it is mostly code. But there will be bling. ;-).

Blog Topics: