QML讓圓形物體按照圓形軌跡運動和color使用rgba值的Demo

看一下效果:


按照圓形運動,主要用到以下函數:

var angle = Math.PI * currentValue / 50.0;
var a1 = Math.cos(angle) * win.width/2;
var b1 = Math.sin(angle) * win.width/2;

這裏面angle是旋轉角度,currentValue是0到100的數值,win.width/2是半徑,a1和b1是x,y。


代碼我粘到下面:

import QtQuick 2.4 import QtQuick.Window 2.2 Window {     id:win     visible: true     width: 400     height: 400     property real currentValue : 0;     Rectangle {         width: parent.width/2         height: width         x: parent.width/4         y: parent.width/4         radius: width/2         color:"yellow"     }     Rectangle {         id: ball1         width: 50         height: width         radius: width/2         x:parent.width - width/2         y:parent.height/2 - height/2         color: "green"     }     Rectangle {         id: ball2         width: 40         height: width         radius: width/2         x:parent.width/4*3 - width/2         y:parent.height/2 - height/2         color:Qt.rgba(0.5,0.5,0.5,0.5)     }     Text {         id: txt         anchors.centerIn: parent         font.pixelSize: parent.width/5         color: "blue"         text: "0%";     }     Timer{         id: timer         interval: 50;         running: true;         repeat: true;         onTriggered: {             if(currentValue == 100) {                 currentValue = 0;             }             currentValue += 1;             txt.text = currentValue.toString()+"%";             var angle = Math.PI * currentValue / 50.0;             var a1 = Math.cos(angle) * win.width/2;             var b1 = Math.sin(angle) * win.width/2;             var a2 = Math.cos(angle) * win.width/4;             var b2 = Math.sin(angle) * win.width/4;             ball1.x = win.width/2-ball1.width/2 + a1             ball1.y = win.height/2-ball1.width/2 + b1             ball2.x = win.width/2-ball2.width/2 + a2             ball2.y = win.height/2-ball2.width/2 + b2         }     } }