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