首先从方形到圆形的转变只需要更改Rectangle的radius值就行了
转变成圆形后就可以出现圆形进度条
```
Rectangle{
property int btnHeight: 48
property int btnWidth: 120
id: cProBtn
height: btnHeight
width: btnWidth
anchors.centerIn: parent
border.color: "#148014"
border.width: 2
radius: 0
Text{
id: cText
anchors.centerIn: parent
font.family: "microsoft yahei"
font.pixelSize: 14
text: qsTr("开始")
}
MouseArea{
anchors.fill: parent
onClicked: {
if (rAniStart.running || rAniStop.running) return
cText.visible = false;
rAniStart.start();
widthAniStart.start();
}
}
PropertyAnimation{
id: rAniStart
target: cProBtn
property: "radius"
duration: 300
from: 0
to: cProBtn.btnHeight/2
onStopped: {
cProgress.onStart();
cProgress.visible = true;
}
}
PropertyAnimation{
id: widthAniStart
target: cProBtn
property: "width"
duration: 300
from: cProBtn.btnWidth
to: cProBtn.btnHeight
}
QmlCircularProgress{
id: cProgress
anchors.centerIn: parent
visible: false
arcWidth: 2
radius: cProBtn.btnHeight/2
interval: 2
arcColor: "#148014"
onSStop: {
visible = false;
rAniStop.start();
widthAniStop.start();
}
}
PropertyAnimation{
id: rAniStop
target: cProBtn
property: "radius"
duration: 300
from: cProBtn.btnHeight/2
to: 0
onStopped: {
cText.text = qsTr("完成");
cText.visible = true;
}
}
PropertyAnimation{
id: widthAniStop
target: cProBtn
property: "width"
duration: 300
from: cProBtn.btnHeight
to: cProBtn.btnWidth
}
}
```
需要完整代码请访问
QtQuickExamples
