QML Animation to transition color from bottom to top

Question

I have a login QML page. When the user inputs the code, I have 4 circles in white, and I would like to transition to blue, filling the circle from bottom to top.

So basically, I want to animate the color property so it transitions from white to blue when "isNumberInserted" is true, and just move it back to white without any transition when the user clears PIN (isNumberInserted = false).

Rectangle{
    anchors.centerIn: parent;
    width: 100; height: width; radius: width/2
    color: isNumberInserted ? "blue" : "white"
}

Any ideas? Thanks!

Update:: SOLUTION: Based on the reply (thanks!), it goes like this:

Rectangle{
    id: rect
    anchors.centerIn: parent;
    width: 100; height: width; radius: width/2

    property double fillPosition: !isNumberInserted

    Behavior on fillPosition {
        enabled: !isNumberInserted
        NumberAnimation { duration: 500 }
    }

    gradient: Gradient {
        GradientStop { position: 0.0;                       color: "white" }
        GradientStop { position: rect.fillPosition - 0.001; color: "white" }
        GradientStop { position: rect.fillPosition + 0.001; color: "blue" }
        GradientStop { position: 1.0;                       color: "blue" }
    }
}

Amfasis Amfasis · Accepted Answer · 2019-03-20T10:28:17

You can abuse a gradient and a property to prescribe the gradient-stops:

Rectangle {
    id: rect
    anchors.centerIn: parent

    width: 30
    height: 30
    radius: 15
    color: "yellow"

    property double fillPosition : 0.5
    Behavior on fillPosition { NumberAnimation { duration: 500 } }

    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: rect.fillPosition - 0.001; color: "lightsteelblue" }
        GradientStop { position: rect.fillPosition + 0.001; color: "blue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

QML Animation to transition color from bottom to top

1 Answers