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
        }
    }
}