Unsolved Animation - 'to' property defaults to 0 unless hard-coded
-
Hi, here's my code:
import QtQuick 2.5 import QtQuick.Window 2.0 import QtQuick.Controls 2.0 Window { visible: true width: 640 height: 480 property int rectHeight: idFlow.height / 2 property int rectWidth: idFlow.width / 3 property int animDurationMs: 4000 property double baseColor1: Math.random() property double baseColor2: Math.random() property double baseColor3: Math.random() Flow { id: idFlow height: parent.height width: parent.width flow: Flow.LeftToRight Rectangle { id: idColorRect radius: 8 height: 50 //SHOULD BE 0 but setting >0 proves the animation is working width: rectWidth gradient: Gradient { // This sets a vertical gradient fill GradientStop { position: 0.0; color: Qt.rgba(baseColor1, baseColor2, baseColor3, 0.4) } GradientStop { position: 1.0; color: Qt.rgba(baseColor1, baseColor2, baseColor3, 1.0) } } border { width: 3; color: "white" } PropertyAnimation on height { //I have also tried NumberAnimation duration : animDurationMs from: 40 to : rectHeight // SHOULD BE rectHeight but it's defaulting to 0 unless I hard-code it, the dynamic value in this case should be 240 easing.type: Easing.InCurve } MouseArea { anchors.fill: parent onClicked: { console.log("rectHeight: " + rectHeight) } // proves rectHeight is being set to 240 } } } }
It doesn't seem to matter how I assign to the 'to' property in the PropertyAnimation, it defaults itself to 0. I have also tried this with NumberAnimation. The 'to' property isn't updating.
On run, click on the rectangle & the rectHeight value is output to the console - you can see that it is being assigned a non-zero value. However it appears that the only way I can get the 'to' property to have a non-zero value is by hard-coding it (i.e. to: 240). But I need it to be dynamically set. I have seen other examples of people assigning a dynamic value to the 'to' property, but for some reason mine won't work.
Can anyone try this code out or tell me what it is that is stopping the dynamic allocation of a value to 'to' from working?
UPDATE: I have copied the code into a separate example project and it is working. So is there a reason it would not work in my project? Am I missing a setting or something?
Many thanks in advance.
-
@oblong I just tried your example which doesn't work. It seems you are complicating the code.
See you are animating theRectangle
which is inside theFlow
andrectHeight
depends onFlow
'sheight
which in turn depends on the root component i.eWindow
. So why not just passWindow
'sheight
directly ? Something likeWindow { id: root ... ... PropertyAnimation on height { //I have also tried NumberAnimation duration : animDurationMs from: 40 to : root.height/2 easing.type: Easing.InCurve }
This works for me.