Animated Layouts with Qt Kinetic

February 26, 2009
Tags: ,

Last week we finally had the first demo of our current work. We are working on animated layouts with the Qt Software guys. It has been a great great time. We are really happy with this work and the results that will come in the near future.

When we talk about animated layouts, we mean that when you change the layout of your widget you want that to have that change in a fancy and animated way (at least when you talk about Qt Kinetic). So we just finished the basic work to allow that and the next step is to define the API of setting animations between the changes of layout.

Right now we use the concept of states (using QStateMachine), a new way of setting a layout without destroying the old one and also a little hack to use QAnimation (this hack will go away as soon as we define a nice API).

Basically all you have to do is to use our concept of “proxies” and instead of adding your widgets to the layout you add this proxies. Each proxy must be associated with a widget and each proxy is associated with a QAnimation. Each QAnimation makes use of a different QEasingCurve making each widget have a different animation.

What is really nice is the fact that when you put all the concepts together you get a lot of “job done” for free, for example when you insert/remove an item from a layout it does the resizing and moving of the other widgets in an animated way also.

If you want to know more about this solution of Qt Kinetic, join us at #qt-kinetic on Freenode and take a look at my co-worker’s blog also: http://blog.eduardofleury.com/?p=51.

Layout Animations

10 Responses to “Animated Layouts with Qt Kinetic”

  1. […] post is focused on the internals but read MoRpHeUz recent post about this subject for the end-user point of […]

  2. I don’t like the bumping effect. IMO it is better without it.

  3. Reminiscent of the demos of clutter, which have caused to much fuss.

  4. When will we see Kinetic kinetic-scrolling (#1 sexy interface feature of the past few years)?

  5. Hmm, this looks really great! Can’t wait to see some real-world example.. 😉

  6. @sad: you can choose any easing curve…we chose the bumping one randomly…

    @maninalift: kinetic-scrolling (specially lists) are widgets very easy to do. We did it with EFL and also with Qt using QEdje. It shouldn’t take much time to have it using Kinetic 😉

  7. When will we see Kinetic kinetic-scrolling (#1 sexy interface feature of the past few years)?

    Already done without animation API,

    http://labs.trolltech.com/blogs/2008/11/15/flick-list-or-kinetic-scrolling/

    But it should be much more easier with the animation API.

  8. One word: WOW!!!

  9. […] Read this overview and more details about internals written by co-workers, then join us at #qt-kinetic @ Freenode […]

  10. Outstanding! \m/

Leave a Reply