QML 中的动画进度条

Question

我需要使用 QML Controls 2 创建一个进度条，如下所示：

    ProgressBar{
    id:progressBar
    width : parent.width * 0.80
    height:parent.height * 0.05
    anchors.bottom:parent.bottom
    anchors.bottomMargin: (parent.height * 0.03)
    anchors.left:parent.left
    anchors.leftMargin: (parent.width * 0.05)
    value : 0.5

    background: Rectangle {
        color: "#e6e6e6"
        radius: 3
    }

    contentItem: Item {        
        Rectangle {
            width: progressBar.visualPosition * parent.width
            height: parent.height
            radius: 2
            color: "#17a81a"

            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    SequentialAnimation on color {
                        loops: Animation.Infinite
                        ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
                        ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
                    }
                }
                GradientStop {
                    position: 1.0
                    SequentialAnimation on color {
                        loops: Animation.Infinite
                        ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
                        ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
                    }
                }
            }
        }
    }  
}

我从来没有在 QML 中使用过动画，我尝试过使用上面的顺序动画，它从上到下进行动画处理。但我需要它从左到右制作动画。

谁能帮我实现这个目标？

Answer 1

至于我，我想覆盖控件的系统行为是个坏主意。无论如何，你可以玩动画渐变。例如：

ProgressBar {
    id: control
    anchors.centerIn: parent
    value: 0
    height: 20
    clip: true
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 6
        border.color: "#999999"
        radius: 5
    }
    contentItem: Item {
        implicitWidth: 200
        implicitHeight: 4

        Rectangle {
            id: bar
            width: control.visualPosition * parent.width
            height: parent.height
            radius: 5
        }

        LinearGradient {
            anchors.fill: bar
            start: Qt.point(0, 0)
            end: Qt.point(bar.width, 0)
            source: bar
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#17a81a" }
                GradientStop { id: grad; position: 0.5; color: Qt.lighter("#17a81a", 2) }
                GradientStop { position: 1.0; color: "#17a81a" }
            }
            PropertyAnimation {
                target: grad
                property: "position"
                from: 0.1
                to: 0.9
                duration: 1000
                running: true
                loops: Animation.Infinite
            }
        }
        LinearGradient {
            anchors.fill: bar
            start: Qt.point(0, 0)
            end: Qt.point(0, bar.height)
            source: bar
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                GradientStop { position: 0.5; color: Qt.rgba(1,1,1,0.3) }
                GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.05) }
            }
        }
    }
    PropertyAnimation {
        target: control
        property: "value"
        from: 0
        to: 1
        duration: 5000
        running: true
        loops: Animation.Infinite
    }
}

QML 中的动画进度条

Animated progress bar in QML

qt

qml

progress-bar

qtquick2

qtquickcontrols2