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

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

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

QML Animation to transition color from bottom to top

animation

qt

state

transition

qml