QML实现渐变侧滑效果——显示和隐藏

当看到一个博文，用一个NumberAnimation实现QML实现渐变侧滑效果，从右往左出现的时候，我就想：要实现一个从右往左出现，动画结束后，点击鼠标，又从左往右隐藏。这样的时候，就可以实现一个侧边的面板，响应鼠标（或者键盘）事件，出现或者隐藏。

test.qml代码：

import QtQuick 2.0

Rectangle {
    id: root
    width: 300
    height: 500

    property bool bShowFull: false

    Rectangle {
        id: rect
        width: 200; height: parent.height
        color: "red"
    }

    NumberAnimation {
        id: animIn
        running: true
        target: rect;
        property: "x";
        from:root.width;
        to:root.width-rect.width;
        duration: 1500;
        easing.type: Easing.InOutExpo;  //Easing.InOutQuad; Easing.InOutCubic
        //loops: Animation.Infinite //Easing.InOutQuart;
    }

    NumberAnimation {
        id: animiOut
        running: false
        target: rect;
        property: "x";
        from: root.width-rect.width;
        to: root.width;
        duration: 1500;
        easing.type: Easing.InOutExpo;  //Easing.InOutQuad; Easing.InOutCubic
        //loops: Animation.Infinite //Easing.InOutQuart;
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        onClicked: {
            if (mouse.button === Qt.LeftButton) {
                if (bShowFull) {
                    animiOut.running = true;
                }else {
                    animIn.running = true;
                }
            }
        }
    }

    Connections {
        target: animIn
        onStopped: {
            console.log(" animIn stopping------------")
            bShowFull = true
        }
    }

    Connections {
        target: animiOut
        onStopped: {
            console.log("animiOut stopping------------")
            bShowFull = false
        }
    }
}

将以上代码保存为test.qml文件，用qmlscene运行。

第一次，红色矩形会从右到左出现，到达指定位置的时候，动画结束，响应onStopped信号。点击鼠标左键，红色矩形从左到右隐藏，动画结束后，再点击鼠标左键，红色矩形又从右往左出现…

运行效果：

参考：https://blog.csdn.net/Shado_walker/article/details/54729926