QML页面切换的动画效果

类似手机切换桌面的动画

作者 qq 843230304
只要qml子类化这个控件，就ok了

AnimationItem.qml

import QtQuick 2.0//使用锚地会导致位移动画无法使用Item {    id: root    property bool show: false    property real showPropertyChangesX: 0    property real showPropertyChangesY: 0    property real showPropertyChangesZ: 1    property real showPropertyChangesOpacity: 1    property real hidePropertyChangesX: 0    property real hidePropertyChangesY: root.height/1.3;    property real hidePropertyChangesZ: 0    property real hidePropertyChangesOpacity: 0    property alias transition: transition    property alias animations: transition.animations    x: (parent !== null) ? parent.x : undefined    y: (parent !== null) ? parent.y : undefined    width: (parent !== null) ?  parent.width : undefined    height: (parent !== null) ? parent.height : undefined    visible: false    state:"hide"    states:[        State{        name:"show"        PropertyChanges {            target:root;            opacity:showPropertyChangesOpacity;            x:showPropertyChangesX;            y:showPropertyChangesY;            z:showPropertyChangesZ;}        when:show        },        State{        name:"hide"        PropertyChanges {target:root;            opacity:hidePropertyChangesOpacity;            x:hidePropertyChangesX;            y:hidePropertyChangesY;            z:hidePropertyChangesZ}        when:!show        }    ]    transitions: Transition {        id: transition        onRunningChanged:{            if(running == true && show){                root.visible = true            }            if(running == false && !show){                root.visible = false            }        }        animations:ParallelAnimation{            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutCirc; duration: 300; }            NumberAnimation { properties: "opacity"; easing.type: Easing.OutCirc; duration: 300 }        }    }}