[英]Animated progress bar in QML
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中使用動畫,我嘗試使用上面的順序動畫,從上到下進行動畫制作。 但我需要它從左到右動畫。
任何人都可以幫我實現這個目標嗎?
至於我,我認為覆蓋控件的系統行為是個壞主意。 無論如何,你可以玩動畫漸變。 例如:
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
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.