September 21, 2011

andreynagovitsyn andreynagovi..
Lab Rat
7 posts

QML complex animation

 

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 [dl.dropbox.com], they are for you in order to avoid starting from the scratch. I will appreciate any suggestions!

Program description:

1. Need moving of elements on a path like in path-view example [doc.qt.nokia.com]

2. Each item with mirror – like [bugreports.qt.nokia.com] effect

3. 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 [doc.qt.nokia.com]

4. Clicking on an item produces it’s endessly repeating “jumping” like in property-animation example [doc.qt.nokia.com].

5. Clickng the item second time (or clicking move button) stops jumping of the item.

Screenshot of the example:

qml example

Sources are here [dl.dropbox.com]

6 replies

September 21, 2011

ZapB ZapB
Ant Farmer
1427 posts

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

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

September 21, 2011

andreynagovitsyn andreynagovi..
Lab Rat
7 posts

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.

September 21, 2011

ZapB ZapB
Ant Farmer
1427 posts

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?

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

September 21, 2011

andreynagovitsyn andreynagovi..
Lab Rat
7 posts

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

September 21, 2011

ZapB ZapB
Ant Farmer
1427 posts

For the first part of second issue you can set the deceleration property [doc.qt.nokia.com] 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.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

September 22, 2011

andreynagovitsyn andreynagovi..
Lab Rat
7 posts

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.

 
  ‹‹ [Solved] Yet another QWidget in QML Question      Application hang on meego Harmattan after clicking outside TextArea. ››

You must log in to post a reply. Not a member yet? Register here!