QML_动画效果

使用states切换样式

预先设置好几个样式，点击就通过state切换控件样式，无动画效果。

   Rectangle {
        id:rect_1

        width: parent.width/8
        height:parent.height/8

        state: "mouse_released"
        anchors.left : parent.left
        anchors.top:  parent.top

        MouseArea {
            anchors.fill: parent

            onPressed: {
                rect_1.state="mouse_pressed"
            }
            onReleased:{
                rect_1.state="mouse_released"
            }
        }
        states: [
            State {
                name: "mouse_pressed"
                PropertyChanges {
                    target: rect_1
                    color: "red"
                }
            },
            State {
                name: "mouse_released"
                PropertyChanges {
                    target: rect_1
                    color: "blue"
                }
            }
        ]
    }

使用PropertyAnimation切换样式

改变颜色的事件加入动画效果

 Rectangle {
        id: rect_2
        width: parent.width/8
        height:parent.height/8

        anchors.left: rect_1.right
        color: "blue"
        opacity: 1.0

        MouseArea {
            anchors.fill: parent
            onClicked: {
                animateColor.start()
                animateOpacity.start()
            }
        }

        PropertyAnimation {
            id: animateColor;
            target: rect_2;
            properties: "color";
            to: "green";
            duration: 1000
        }
    }

使用NumberAnimation切换样式

改变数值的事件加入动画效果

    Rectangle {
        id: rect_3
        width: parent.width/8
        height:parent.height/8

        anchors.left: rect_2.right
        color: "blue"
        opacity: 1.0

        MouseArea {
            anchors.fill: parent
            onClicked: {
                animateHeight.start()
            }
        }

        NumberAnimation {
            id: animateHeight
            target: rect_3
            properties: "height"
            from: parent.height/8
            to: parent.height/4
            duration: 1000
        }
    }

还可以这么写

 Rectangle {
       id: rect_4
       width: parent.width/8
       height:parent.height/8

       anchors.left: rect_3.right
       color: "blue"
       PropertyAnimation on color{
           from:"blue"
           to:"green"
           duration: 1000
       }
   }

使用transitions切换样式

预先设置状态，状态之间的变化加入动画效果

    Rectangle {
        id: rect_5
        width: parent.width/8
        height:parent.height/8
        anchors.left: rect_4.right
        state: "mouse_released"
        MouseArea {
            anchors.fill: parent
            onPressed: {
                rect_5.state="mouse_pressed"
            }
            onReleased:{
                rect_5.state="mouse_released"
            }
        }

        states: [
            State {
                name: "mouse_pressed"
                PropertyChanges {
                    target: rect_5
                    color: "red"
                }
            },
            State {
                name: "mouse_released"
                PropertyChanges {
                    target: rect_5
                    color: "blue"
                }
            }
        ]

        transitions: [
            Transition {
                from: "mouse_released"
                to: "mouse_pressed"
                ColorAnimation {
                    target:rect_5
                    duration: 1000
                }
            },
            Transition {
                from: "mouse_pressed"
                to: "mouse_released"
                ColorAnimation {
                    target:rect_5
                    duration: 1000
                }
            }
        ]
    }

使用Behavior切换样式

改变数值的事件加入动画效果

    Rectangle {
        id: rect_6
        width: parent.width/8
        height:parent.height/8
        anchors.left: rect_5.right
        color: "black"

        MouseArea {
            anchors.fill: parent

            onPressed: {
                rect_6.width=rect_6.parent.width/4
            }
            onReleased:{
                rect_6.width=rect_6.parent.width/8
            }
        }
        Behavior on width {
            NumberAnimation {
                target: rect_6
                properties: "width"
                duration: 1000
            }
        }
    }