Qt Animation framework

I've been working recently with Qt Animation Framework, trying to learn how to utilize it efficiently. Below is a video showing circular carousel widget which uses the animation framework.



I need to still continue experimenting how to really extend the animation classes and use the whole state machine framework, but so far I'm impressed by the latest 2.2 API version. Originally my biggest concern about this whole "Kinetic" was that it would be too high-level and have suboptimal performance in embedded devices, but luckily that doesn't seem to be the case. Now with Qt 4.5, QGraphicsView starts to be very usable also in N810 and one just needs to know tips & tricks how to utilize it efficiently. Below is the same carousel widget in N810, using the "raster" graphics backend:



FPS up there means how many times QGraphicsView paintEvent() is called, so it drops when more drawing to view is needed, but stays quite healthy & usable anyway. Back to coding!

Special thanks for graphics used goes to:
- Background: Tribe, by Alexander Timonov
- Icons: Kreski-Lines, by Holger Bauer

Comments

jeez said…
Nice demos!
It would be nice to see a post about these "tips & tricks" that you mentioned... ;)
April 8, 2009 at 3:52 PM
timsamoff said…
Cool! http://circledock.wikidot.com/ is one of my favorite Windows apps. I'd love to see something like it on the tablets.
April 8, 2009 at 4:16 PM
Kaitsu @ QUIt Coding said…
@jeez: I'll try to write a separate post about those, mostly it's about using what QGraphics* provides and avoid stupid things... ;-) BTW, your kinetic layout stuff looks very good!

@tim: Thanks for the link, Circledock-type of UI would indeed work quite nicely in tablets & touch!
April 8, 2009 at 5:27 PM
Perna said…
Really cool..what about the code?!! is it available somewhere? :-)

BR
--romelo
April 8, 2009 at 5:37 PM
jeez said…
@kaitsu: ok, I'll wait then... ;)
yes, animated layout is becoming really cool! I'll make a post as soon as this kinetic branch becomes public somewhere.
April 8, 2009 at 9:26 PM
Jayesh said…
Gr8 demo. Looking forward to using it.
April 9, 2009 at 7:08 PM
Kaitsu @ QUIt Coding said…
Thanks everyone for comments, very inspiring! @romelo: Sources are not available now, I'll try to get some of these wide open in future!
April 9, 2009 at 8:13 PM
aviral said…
Yipee cool i am also trying out Qt Anim Frmwk 2.3 and am really excited to see some of ur stuff ll soon let u know of my findings
April 27, 2009 at 10:10 PM
Randall "Texrat" Arnold said…
Absolutely amazing. What's really cool is that I had a vague idea in my head a while back of how I'd like to see a tablet UI work, and you've managed to pull it off! Nice.

Now, take it one step further-- allow your "satellites" to support a hierarchal structure, so that each satellite may in turn have its own satellites. You could open one or expand it to reveal its sub-satellites depending on click context (one tap, 2? short vs long?). Even better, allow satellites to be torn off temporarily.

I see potential for much cool stuff here!
May 8, 2009 at 6:34 AM
Unknown said…
That's amazing. I tried to compile kinetic + Qt Animation Framework successfully. I'm very interested in knowing how did you use QGraphicsView for this high performance result on a embedded system. Waiting for your hints
September 8, 2009 at 8:26 PM
Post a Comment

Popular posts from this blog

Qt 5.10 QML Shape testing

Image
When implementing component into QtQuick UI which needs something more than rectangles, images and texts, pure declarative QML hasn't been enough. Popular choices to use for items with some sort of vector drawing are QML Canvas , QQuickPaintedItem  or QNanoPainter . But with Qt 5.10 there will be supports for new Shape  element with paths that contain lines, quads, arcs etc. so I decided to install Qt 5.10 beta3 and implement all tests of "qnanopainter_vs_qpainter_demo" with also QML + Shape elements. ( This kinda makes it "qnanopainter_vs_qpainter_vs_qmlshape_demo" but not renaming now ). So here is in all glory the same UI implemented with QNanoPainter (left), QQuickPaintedItem (center), and QML+Shape (right): Hard to spot the differences right? If only there would be a way to prove this, some way to x-ray into these UIs... like QSG_VISUALIZE=overdraw  to visualize what Qt Quick Scene Graph Renderer sees? Here you can see that scene graph sees QNan
Read more

Introducing QNanoPainter

Qt World Summit is just about to start! I’m not participating this time, but wanted to contribute one-more-thing to discuss in UI groups at the heart of Berlin ;) During the past about six months we at QUIt Coding have had a side-side-project called QNanoPainter. This library is designed for implementing custom QQuickItems into Qt5 scene graph. Currently if you want to implement custom Qt Quick item, options are at least: QQuickItem : Offers best performance due to Qt5 scene graph integration. But QSG* classes are relatively low-level with vertices, indices & materials. Painting more complicated things requires quite an expert and even then productivity is not very high. QQuickFramebufferObject : This is a good option if you want to draw with OpenGL into QQuickItem. But as we all know, OpenGL is also quite low-level API so no productivity wins here. QQuickPaintedItem : This means painting with good old QPainter C++ API. Weakness of QPainter with modern graphics accelerated
Read more

Qt 5.10 Rendering Benchmarks

Image
Qt 5.10.0 RC packages are available now and actual release is happening pretty soon. So this seems to be a good time to run some rendering benchmarks with 5.10, including new QML Shape element, QQuickPaintedItem and QNanoPainter . After my previous blog post , some initial comments mentioned how QML Shape didn't reach their performance expectations. But I think that might be more of a "use the right tool for the job" -kind of thing. This demo application is very much designed to test the limits of how much heavily animated graphics can be drawn while keeping performance high and while having its own strengths, QML Shape likely isn't the tool for that. To prove this point, there is a new ' flower ' test case in QNanoPainter demo app which renders a nice flower path, animating gradient color & rotation (but not path). Combining it with new setting to render multiple items (not just multiple renders per item) and the outcome looks like this with 1 and 1
Read more