qml状态机动画的使用

import QtQuick 2.0
import QtQuick.Controls 2.2
Rectangle {
    id:page
    width: 320
    height: 480
    color: "lightgray"
    Text{
        id:helloText
        text:"hello world"
        y:30
        anchors.horizontalCenter: page.horizontalCenter
        MouseArea{
            id:mousearea
            anchors.fill: parent
        }
        /*
          *添加状态机状态
        */
        states: State{
            /*
              *添加一个状态当鼠标按下时
            */
            name:"down";when:mousearea.pressed === true
            /*
              *当状态触发时要执行的属性值变换
            */
            PropertyChanges {
                target: helloText
                y:160
                rotation:180
                color:"red"
            }
        }
        /*
          *添加一个转换操作过程当状态改变时
        */
        transitions: Transition {
            //from to 代表的是从某个状态到另外一个状态的过程中
            from: ""
            to: "down"
            //reversible 代表的是反过程
            reversible: true
            //添加一个并行的动画 里面的动画都是同时调用
            ParallelAnimation{
                NumberAnimation {
                    properties: "y,rotation"
                    duration: 500
                    easing.type: Easing.InOutQuad
                }

                ColorAnimation {
                    duration: 500
                }
            }
        }
    }
    Grid {
        id: colorPicker
        x: 4
        anchors.bottom: page.bottom
        anchors.bottomMargin: 4
        rows: 2
        columns: 3
        spacing: 3
        /*
         * 处理cell的信号事件，如果cell发送了信号就设置Text的值
        */
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }

    }

    Button {
        id: button
        x: 66
        y: 140
        text: qsTr("Button")
        focusPolicy: Qt.NoFocus
    }
}