QML动画将颜色从底部过渡到顶部

Question

我有一个登录QML页面。 当用户输入代码时，我有四个白色的圆圈，我想过渡到蓝色，从下到上填充圆圈。

因此，基本上，我想为color属性设置动画，以便在“ isNumberInserted”为true时从白色过渡到蓝色，并在用户清除PIN（isNumberInserted = false）时将其移回白色而没有任何过渡。

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

有什么想法吗？谢谢！

---

更新：：解决方案：根据回复（谢谢！），结果如下：

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" }
    }
}

Answer 1

您可以滥用渐变和属性来指定渐变停止点：

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" }
    }
}