[solved] position change from custom component and animation in QML

[deimos]

Hi,

I implemented a custom QDeclarativeItem component. The problem is that if I change its position from c++ the code in QML to animate it doesn't work . If I change it in QML the animation works.
@
MyItem {
id: myItem
onXChanged: console.log("XCHANGED",x);

     Behavior on x { NumberAnimation { duration: 1000 } }

}

MouseArea {
anchors.fill: myItem
onClicked: myItem.x+=100
}
@

For example with this code, if I click on the item animation starts, but if I change position in c++ code, onXChanged is catched but the animation doesn't start.
I suppose that animations get called only when the property is changed by QML ? Is there a workaround or maybe I miss something ?
As a workaround I think I could be make a custom x variable and when changed from c++ get that change from QML and then set new x value from there, for example

@onMyxChanged: x = my_x@

but should not be a definitive solution because this is a component plugin and the position change should be transparent to user

thanks for your time

[deimos]

I found that doing this

@setProperty ("x", x); @

in the QDeclarativeItem subclass, makes the qml animation to work

[muthu005]

me too facing the similar problem. but i did not understand how you solved it. can you please elaborate in detail.

[deimos]

by calling QDeclarativeItem::setX() the position of the component is changed, but the signal onXChanged isn't raised and the animation can't start. If you call setProperty it is, because it is like you change it in QML source.
remember to set

@setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);@

and not to call the setProperty in your constructor because the item isn't yet "completed".
I didn't understand this behavior well, but maybe there is another better solution ?

[muthu005]

Thank you deimos :)

[meolic]

I have slightly extended problem. If I made two changes on x (call setProperty twice) only the second one will be animated. I do not know if the element is started to move to the first destination and then almost imediately changes to the second destination, or something else hapened, but I do not get the result which I want: to see both animations one after other. I have asked this question already in Q&A but I did not get the answer, yet. Maybe you have some solution?

[deimos]

Yes, you right. The animation of the x property is its current value. So if you change it before animation ends, the last value is used in the animation.
A solution that come to my mind is to use for example 2 properties in your custom item and when you change one of those with setProperty, a SequentialAnimation could start:

@MyItem {
id: myItem
property real x1
property real x2

 onX2Changed: anim.running = true

 SequentialAnimation {
      id: anim
      running: false
      NumberAnimation { target: myItem; property: "x"; to: x1; duration: 1000 }
      NumberAnimation { target: myItem; property: "x"; to: x2; duration: 1000 }
 }

}@

Hope this help, let me know if it works