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 }
        }
    }
}