qml状态和动画

main.cpp与其他的一致
状态、状态切换、属性动画、槽触发动画、独立动画、切换动画、qml针对一些属性优化的动画、弹簧一样的动画、组合动画、反弹、缓冲、曲线、加速、减速等动画效果等等。
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Rectangle
{
    id:root
    width:640
    height:480
    color:"lightgray"
    //状态
    Rectangle
    {
        id:rect
        width:200
        height: 200
        //anchors.centerIn: parent
        color: "blue"
        Text
        {
            anchors.centerIn: parent
            text:"状态"
            font{family: "微软雅黑";pointSize: 20}
        }
        MouseArea
        {
            id:mouseArea
            anchors.fill: parent
            acceptedButtons: Qt.RightButton | Qt.LeftButton
            onClicked:
            {
                //改变对象的状态
                if(mouse.button == Qt.RightButton)
                    rect.state = "moved"
                else
                    rect.state = "clicked"
            }
        }
        states:
        [
            State
            {
                //点击状态
                name: "clicked"
                //when属性，当处于某种状态时自动调用
                when:mouseArea.pressed
                PropertyChanges
                {
                    target: rect
                    width:100
                    height:100
                }
                PropertyChanges
                {
                    target: root
                    color:"gray"
                }
            },
            State
            {
                //移动状态
                name:"moved"
                //状态改变时可以改变多个对象的的属性
                PropertyChanges
                {
                    target:rect
                    x:100
                    y:100
                }
                PropertyChanges
                {
                    target: root
                    color:"lightblue"
                }
            }
        ]
    }
    //属性动画
    Rectangle
    {
        width:parent.width/5
        height: parent.height/5
        color:"red"
        Text
        {
            anchors.centerIn: parent
            text:"属性动画"
            font{family: "微软雅黑";pointSize: 20}
        }
        //属性动画
        PropertyAnimation on x
        {
            //属性目标值
            to:300
            //时间
            duration:1000
            //重复
            loops:Animation.Infinite
        }
        PropertyAnimation on y
        {
            to:300
            duration:2000
            loops:Animation.Infinite
        }
        PropertyAnimation on opacity
        {
            to:0.05
            duration:3000
            loops:Animation.Infinite
        }
        PropertyAnimation on scale
        {
            to:0.05
            duration:4000
            loops:Animation.Infinite
        }
    }
    //行为动画
    Rectangle
    {
        x:300
        y:300
        width:parent.width/5
        height: parent.height/5
        color: "green"
        //行为动画，当属性改变时触发动画
        Text
        {
            anchors.centerIn: parent
            text:"行为动画"
            font{family: "微软雅黑";pointSize: 20}
        }
        Behavior on x{PropertyAnimation{duration: 1000;easing.type: Easing.OutElastic}}
        Behavior on y{PropertyAnimation{duration: 1000;easing.type: Easing.OutElastic}}
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                parent.x = mouse.x
                parent.y = mouse.y
            }
        }
    }
    //槽中的动画
    Rectangle
    {
        id:rect1
        x:200
        y:200
        width:parent.width/5
        height: parent.height/5
        color: "lightblue"
        Text
        {
            anchors.centerIn: parent
            text:"槽触发的动画"
            font{family: "微软雅黑";pointSize: 20}
        }
        //槽中的动画
        MouseArea
        {
            anchors.fill: rect1
            onClicked: PropertyAnimation{target: rect1;properties: "x,y";to:350;duration: 3000}
        }
    }
    //独立动画
    Rectangle
    {
        id:rect2
        x:100
        y:200
        width:parent.width/5
        height: parent.height/5
        color: "yellow"
        Text
        {
            anchors.centerIn: parent
            text:"独立动画"
            font{family: "微软雅黑";pointSize: 20}
        }
        //独立动画
        PropertyAnimation
        {
            id:animate
            properties: "x,y"
            duration: 3000
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                //设置独立动画的属性
                animate.target = rect2
                animate.to = 500
                //启动动画
                animate.running = true
            }
        }
    }
    //切换
    Rectangle
    {
        id:rect3
        x:200
        y:100
        width:parent.width/5
        height: parent.height/5
        color: "pink"
        Text
        {
            anchors.centerIn: parent
            text:"切换"
            font{family: "微软雅黑";pointSize: 20}
        }
        //切换
        states: State
        {
            name: "moved"
            PropertyChanges {target: rect3;x:100;y:450}
        }
        //所有PropertyAnimation动画都可以设置easing属性来控制动画，具有反弹、缓冲、曲线、加速、减速等多种效果
        transitions: Transition {PropertyAnimation{properties: "x,y";duration: 5000;easing.type: Easing.OutElastic}}
        MouseArea
        {
            anchors.fill: parent
            onClicked:rect3.state = "moved"
        }
    }
    //属性动画元素
    Rectangle
    {
        id:rect4
        x:400
        y:150
        width:parent.width/5
        height: parent.height/5
        color: "pink"
        Text
        {
            anchors.centerIn: parent
            text:"属性动画元素"
            font{family: "微软雅黑";pointSize: 20}
        }
        //属性动画元素，包括NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation,SmoothedAnimation(平滑过渡的动画)，SpringAnimation(像弹簧一样Q弹的动画),
        //ParentAnimation(父对象改变时产生动画),AnchorAnimation(锚改变时产生动画), PathAnimation(路径动画)等，这些动画对指定类型的动画有优化
        ColorAnimation on color
        {
            to: "lightgreen"
            duration: 10000
        }
        RotationAnimation on rotation
        {
            from:75
            to:1154
            duration:10000
        }
    }
    //属性动画元素 Q弹
    Rectangle
    {
        id:rect5
        x:150
        y:400
        width:parent.width/5
        height: parent.height/5
        color: "pink"
        Text
        {
            anchors.centerIn: parent
            text:"属性动画元素 Q弹"
            font{family: "微软雅黑";pointSize: 20}
        }
        //属性动画元素 Q弹 弹簧一样的
        Behavior on x{SpringAnimation{spring: 5; damping: 0.2}}
        Behavior on y{SpringAnimation{spring: 5; damping: 0.2}}
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                rect5.x = mouse.x - rect5.width/2
                rect5.y = mouse.y - rect5.height/2
            }
        }
    }
    //组合动画可以用ParallelAnimation(动画同时运行)或SequentialAnimation(动画一个接一个的运行)
    Image
    {
        id:img
        x:350
        y:400
        source: "qrc:/保存.png"
        Text
        {
            anchors.centerIn: parent
            text:"组合动画"
            font{family: "微软雅黑";pointSize: 20}
        }
        //SequentialAnimation组合动画，动画顺序执行
        //SequentialAnimation on y
        //{
        //    loops:Animation.Infinite
        //    NumberAnimation{to:100;easing.type: Easing.OutBounce;duration: 2000}
        //    PauseAnimation {duration: 200}
        //    NumberAnimation{to:400;easing.type: Easing.OutElastic;duration: 2000}
        //}
        //SequentialAnimation和ParallelAnimation组合的组合动画
        SequentialAnimation
        {
            running: true
            loops:Animation.Infinite
            //ParallelAnimation组合动画
            ParallelAnimation
            {
                NumberAnimation{target:img;to:100;easing.type: Easing.OutBounce;duration: 1000;properties: "x"}
                NumberAnimation{target:img;to:400;easing.type: Easing.OutElastic;duration: 2000;properties: "y"}
            }
            ParallelAnimation
            {
                NumberAnimation{target:img;to:400;easing.type: Easing.OutBounce;duration: 2000;properties: "x"}
                NumberAnimation{target:img;to:100;easing.type: Easing.OutElastic;duration: 1000;properties: "y"}
            }
        }
    }
}

效果：

代码：https://github.com/yangyang0312/cpp/tree/master/Qt/qml/testQuick