QML complex animation

andreynagovitsyn

Hello everyone! I’m new to QML. I’m given the task to compose the following program in QML. I’ve done some research and found some ready to use code snippets for the task (click links in the task description). But still it’s not enough to complete the program. My sources provided by "this link":http://dl.dropbox.com/u/4115029/mirror.zip, they are for you in order to avoid starting from the scratch. I will appreciate any suggestions!

Program description:

Need moving of elements on a path like in "path-view example":http://doc.qt.nokia.com/4.7-snapshot/declarative-modelviews-pathview.html
Each item with "mirror - like":https://bugreports.qt.nokia.com//browse/QTBUG-8968 effect
Need 2 buttons to move elements around the path programmatically.

a. While holding move button (left or right), the speed of moving should increase smoothly until some threshold.
b. When release move button, the movement of items around the path should decelerate ending with any "type of easing":http://doc.qt.nokia.com/4.7-snapshot/declarative-animation-easing.html

Clicking on an item produces it’s endessly repeating “jumping” like in "property-animation example":http://doc.qt.nokia.com/4.7-snapshot/declarative-animation-basics.html.
Clickng the item second time (or clicking move button) stops jumping of the item.

Screenshot of the example:

!http://dl.dropbox.com/u/4115029/qmlexample.png(qml example)!

Sources are "here":http://dl.dropbox.com/u/4115029/mirror.zip

ZapB

So which aspect(s) do not work and you need help with?

andreynagovitsyn

The only problem you can see on the picture - mirror effect. The gradient of mirror element (which is QML Item) goes to white, but it should be transparent covering all the elements inside (text and image in this case). All the other tasks can be seen only while running the program.

ZapB

To solve the mirror transparency issue, make sure that you use a source image with an alpha channel and a transparent background. From the image about the source image is also not blended properly due to lack of transparent background.

I'll look at the other aspects later when I get more time but what exact issues do you have remaining with them?

andreynagovitsyn

Thank you for the reply!
The source image already has transparent background and alpha channel. The containing rectangle had white fill color and I've changed it to transparent color too. You can see the result in the (updated) image above. But the problem with mirror effect still exists.

Second issue is - how to control speed of decelerating elements on the path (after flicking gesture) AND END UP DECELERATING WITH CERTAIN TYPE OF EASING

Third issue is - how to move items around the path PROGRAMMATICALLY, WITH SMOOTH INCREASING SPEED WHILE HOLDING DOWN ANY OF THE MOVE BUTTONS

ZapB

For the first part of second issue you can set the "deceleration property":http://doc.qt.nokia.com/latest/qml-pathview.html#flickDeceleration-prop of the PathView item.

I do not think that PathView supports using different easing curves for deceleration. If you really need this then you will likely have to look at the implementation of the PathView item and write your own modified version of it in C++ that has a decelerationEasing property.

andreynagovitsyn

Thank you for the useful reply, ZapB! What about transparent mirror problem?
If it's not possible in QML, are there any ways to implement it in Qt C++?
Some hints about classes to use or even code snippets would be very useful.
And I still hope, that the most part of the things described above can be implemented in pure QML.