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

Question

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

所以基本上，我想为颜色属性设置动画，以便当“isNumberInserted”为真时它从白色过渡到蓝色，并且当用户清除 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" }
    }
}

标签： qtanimationqmlstatetransition

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