QmlStates过渡动画以及锚点过渡

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3
import QtQml 2.13

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Item {
        id: container
        anchors.fill: parent

        // 定义过渡 子类会生效
        transitions:[ Transition {
            AnchorAnimation { duration: 2000 }
        }, Transition {
            NumberAnimation { duration: 2000}
        }]

        // 矩形
        Rectangle {
            id: myRect
            width: 100; height: 100
            color: "red"
        }

        // 状态列表
        states: [

            // 锚点右边走
            State {
                name: "reanchored"
                AnchorChanges { target: myRect; anchors.right: container.right }
            },

            // 锚点下边走
            State {
                name: 'jie'
                AnchorChanges {
                    target: myRect
                    anchors.left: container.left
                }
            }

        ]


        // 点击切换矩形的状态，转换过渡动画
        MouseArea {
            anchors.fill: parent
            onClicked: {
                container.state = 'jie'
                myRect.width = container.width / 2      // 增加宽度
            }
        }

        // 组件加载完成时的设置状态
        Component.onCompleted: container.state = "reanchored"
    }

}