NumberAnimation數字類動畫

如下代碼實作目标是一個小方塊，從左邊開始向右邊滾動，最後變成一個球。

具體代碼如下：

import QtQuick 2.3      

import QtQuick.Window 2.2      

Window {      

id:win      

visible: true      

width: 800      

height: 600      

Rectangle{      

y:win.height/2      

id:source      

width: 100      

height: 100      

color: "red"      

}      

NumberAnimation {      

id:xChange      

target: source      

to:win.width-source.width      

property: "x"      

duration: 5000      

easing.type: Easing.InOutQuad      

}      

NumberAnimation {      

id:rotationChange      

target: source      

to:360*5      

property: "rotation"      

duration: 5000      

easing.type: Easing.InOutQuad      

}      

NumberAnimation {      

id:radiusChange      

target: source      

to:100      

property: "radius"      

duration: 5000      

easing.type: Easing.InOutQuad      

}      

MouseArea{      

anchors.fill: parent      

onClicked:{ xChange.start()      

rotationChange.start()      

radiusChange.start()      

}      

}      

}      

效果圖：
      

思路很簡單：

首先是從左向右的滾動，是以呢，就是要改變x坐标，是以這就是第一個動畫。

其次要旋轉，那就要有旋轉屬性的變化，是以這就是第二個動畫了。

最後轉起來了，要變成輪子，其實就是四個角的變化，是以這就是第三個動畫了。

OK，QT之美已經開始展現。