[Qt-qml] How to animate an item moving between layouts

[Harald Hvaal]

Hi, I am hoping that someone could help me solve this seemingly simple problem:
How do I animate an item moving from one layout two another?

I have attached a small example of what I am trying to do, but even
more summarized the problem goes like this:

Row { id: top; Box{id: box} }
Row { id: bottom; }
Button { onClicked: { box.parent = bottom; }

How do I animate this parentchange?

I have tried add/move-transitions on the rows, I have tried
ParentChange in states, ParentAnimations used on behaviors, nothing
seems to solve this problem. Any help would be greatly appreciated!

Thanks,

Harald Hvaal
harald...@gmail.com

[Artem Marchenko]

Hi Harald

There is ParentAnimation for it - http://doc.qt.nokia.com/latest/qml-parentanimation.html

However, I tried it with your example and parent change is not animated. Interestingly mixing the docs example with your code results in the immediate parent change and then slow move by 10x10 pixels:

states: State {
             name: "reparented"
             ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
         }

         transitions: Transition {
             ParentAnimation {
                 NumberAnimation { properties: "x,y"; duration: 1000 }
             }
         }

Maybe it doesn't work with repeaters?

A brute force solution would be to reparent your box temporarily to the higher level item, calculate source and target coords in this higher level item, animate and reparent to the target layout once animation is finished. Could, however, be problematic if you want to insert the item into a middle of a row.

Best regards,

Artem.

<layoutAnimation.qml>_______________________________________________
Qt-qml mailing list
Qt-...@qt.nokia.com
http://lists.qt.nokia.com/mailman/listinfo/qt-qml

[Harald Hvaal]

On Sun, Dec 11, 2011 at 1:27 AM, Artem Marchenko
<artem.m...@gmail.com> wrote:
> A brute force solution would be to reparent your box temporarily to the
> higher level item, calculate source and target coords in this higher level
> item, animate and reparent to the target layout once animation is finished.
> Could, however, be problematic if you want to insert the item into a middle
> of a row.

I have also thought of this, but it would to me never be a solution
because you're not supposed to be guessing from the outside where the
layout will put your item.

Harald Hvaal
harald...@gmail.com

[Harald Hvaal]

Is there really no way to do this guys? Not even with qt quick 2?
Although I'm hoping to avoid it, would it help if I wrote some component in c++?

Harald

[Artem Marchenko]

Harald, I clearly remember some discussion (happening on IRC?) where people were discussing *details* about the animation of moving item between two rows.
I was even trying the example about it.

Unfortunately I don't remember what exactly it was about and there is a possibility that I remember it totally wrong. Give IRC a try though.

BR,
Artem.

[bea...@nokia.com]

This can be done with a ParentAnimation. I've attached a modified example that uses ParentChange and ParentAnimation.

There is an odd bug where the item's value jumps by -100 at the start of the animation if the bottomRight row is anchored to the right of its parent; for some reason, this doesn't occur if the bottomRight row is positioned with an x value instead.


cheers,

Bea

[Harald Hvaal]

Hi Bea,

Sadly, your example does not address the problem that the animation
should work regardless of what is contained in the Row layout. In the
"reparented"-state, you use absolute positioning for the end position
of the animation, which i hope you agree is not a very robust solution
(adding another item before, adding a spacing to the layout or even
just resizing the previous element is enough to throw it off).

Since the only one who knows where the item is to be positioned is the
Row itself, I was hoping that the add/move transitions for the row
layout might be of help, but I haven't found a way to do this yet.

...and as a sidenote, I enjoyed your devdays presentation this year :)

Harald Hvaal
harald...@gmail.com

[bea...@nokia.com]

Hi Harald,

Yes, the absolute positioning is not a robust solution - it was more just an example to get started. You could probably try going through the children property of the Row to check the number of items and their dimensions, though looping through the children doesn't sound like the most fantastic solution either. Unfortunately there's no real straightforward way to do it in Qt Quick 1.

We've been looking at some built-in transitions for ListView and GridView in QtQuick 2, and those will make it easy to implement this sort of thing. And, glad you enjoyed the presentation :)

cheers,

Bea

________________________________________
From: mete...@gmail.com [mete...@gmail.com] on behalf of ext Harald Hvaal [harald...@gmail.com]
Sent: 15 December 2011 18:02
To: Lam Bea (Nokia-MP/Brisbane)
Cc: qt-...@qt.nokia.com
Subject: Re: [Qt-qml] How to animate an item moving between layouts