qml----動畫入門（二、簡單的動畫實現 NumberAnimation、ColorAnimation類）

上一節中我們講了PropertyAnimation類，現在我們來講講專門處理數字類型的property。

說起這個NumberAnimation，與PropertyAnimation是表親，有很多相同的血緣關系，但是塔又重寫了from和to兩種屬性，改成了real類型。下面來個小例子看看

import QtQuick 2.2

Rectangle{
    id: rootItem
    width: 360
    height: 240
    color: "#EEEEEE"

    Rectangle{
        id: rect
        width: 50
        height: 50
        x: 0
        y: 5
        color: "blue"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                animationX.start()
                animationRotation.running = true
                animationRadius.start()
            }
        }

        NumberAnimation{
            id: animationX
            target: rect
            properties:  "x, y"
            to: 200
            duration: 3000
            easing.type: Easing.OutCubic    //設置運動軌跡
        }

        NumberAnimation{
            id: animationRotation
            target: rect
            property: "rotation"
            to: 360
            duration: 3000
            running: false
            easing.type: Easing.OutInQuad
        }

        NumberAnimation on radius {
            id: animationRadius
            to: 25
            duration: 2000
            running: false
        }
    }
}

效果圖如下：

 

ColorAnimation類

在來說說這個ColorAnimation類，巧了，也是前兩個遠親的親戚。它也就干了一件事，重寫了from和to屬性的類型。改成了color類型。無代碼說個卵。。。mdzz，看我下面

import QtQuick 2.2

Rectangle{
    id: rootItem
    width: 360
    height: 240
    color: "#EEEEEE"

    Rectangle{
        id: rect
        width: 60
        height: 60
        anchors.centerIn: parent
        radius: 30
        color: "red"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: ColorAnimation{
                target: rect
                property: "color"
                to: "green"
                duration: 1500
            }
        }
    }
}