QML动画之NumberAnimation数字类动画

QT真的是不能再赞了，所有的东西从名字就可以很简答的看明白，比如这个就是说的以数字为属性的动画。比如旋转、长宽高和四个角的角度，等等。没错，这个例子就是这个。
其实在指定动画的时候，你可以不使用property:"x"这样的方式，你还可以这样：
NumberAnimationonx{……………………}
好吧，这个是插曲，只是习惯而已了。
代码是书上的略作改动。目标是一个小方块，从左边开始向右边滚动，最后变成一个球。
代码如下：

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之美已经开始展现。