Animation - 'to' property defaults to 0 unless hard-coded

oblong

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.

p3c0

@oblong I just tried your example which doesn't work. It seems you are complicating the code.
See you are animating the Rectangle which is inside the Flow and rectHeight depends on Flow's height which in turn depends on the root component i.e Window. So why not just pass Window's height directly ? Something like

Window {
    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.