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

Posted 2023-02-16

【中文标题】QML动画从底部到顶部过渡颜色

【英文标题】：QML Animation to transition color from bottom to top

【发布时间】：2019-03-20 10:14:49

【问题描述】：

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

所以基本上，我想为颜色属性设置动画，以便在“isNumberInserted”为真时从白色过渡到蓝色，并在用户清除 PIN 时将其移回白色而不进行任何过渡（isNumberInserted = false）。

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

有什么想法吗？谢谢！

---

更新:: SOLUTION:根据回复（谢谢！），它是这样的：

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" 
    

【参考方案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"