Video: iPad inspired Flipboard page flip with Qt QML

Tommi Laukanen strikes again with yet another awesome step forward with QT QML projects. Inspired by Flipboard for iPad (which he says would be the one app to make him get one) he’s sought about to mimic Flipboard’s page turn effect with QML script. Flipboard for iPad looks great huh? I wonder what other aspects Tommi can bring over, as well as increasing the flip turn speed.

…I thought about trying to mimic the Flipboard’s page turn effect with the QML script. The page turn is pretty simple and a bit more modern then traditional paper like curly page turn. In Flipboard the page rotates from the center like folding the screen.

I created this effect with Flipable element which is clipped with parent Item element so that only the half of the flipable is visible at all times. The flipable element contains a duplicate page content as the underlying element which is just created with HTML formatted Text element. I also added a flavor of shadow to the Transition animation so that inner part of the fold seems a bit darker. Shadow was created with transparent gradient image.

Here you can see the page turn (or fold) in action with the Nokia N900. Rendering speed wasn’t that fast when I used “raster” rendering and might have been way faster if “opengl” would have been used.

Thanks Bas for the heads up!

substanceofcode via MeeGoExperts

Tags: Maemo 5, N900, Nokia, Nokia N900, QT

Category: Maemo, Nokia, Nseries