I failed to slide screen animation in QML

Question

I want to slide the menu screen over to the root rectangle. The menu screen comes from the left side, this is OK but I couldn't send it back again.

Window {
    visible: true
    id: root
    width: 460; height: 640
    color: "white"
    property int duration: 3000
    property bool menu_shown: false



    Rectangle {
        id: menu_screen
        width: parent.width; height: parent.height
        color: "#303030"
        radius: 10

        x: -460;
        SequentialAnimation {
            id: anim_menu
            NumberAnimation {
                target: menu_screen
                properties: "x"
                to: -160
            }
        }
    }

    Rectangle {
        id: click_button
        width: 50; height: 50
        color: "#303030"
        scale: m_area.pressed ? 1.1 : 1
        radius: 5

        x: 5; y: 5;
        SequentialAnimation {
            id: anim_button
            NumberAnimation {
                target: click_button
                properties: "x"
                to: 305

            }
        }

    }

    MouseArea {
        id: m_area
        anchors.fill: click_button
        onClicked : {
            anim_button.start()
            anim_menu.start()
        }

    }
}

Answer 1

When the main window is resized, the menu_screen becomes visible on the left side of the window. This is not, as I see it, to be expected. Also, you don't need to define behaviors for both the menu_screen and the click_button, but you can bind the x property of click_button as shown below. That way the button is also animated when menu screen is animated. You can also use easing.type, duration etc. of animation as shown here.

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    id: root
    width: 460; height: 640
    color: "white"
    property int duration: 3000
    property bool menu_shown: false

    Rectangle {
        id: menu_screen
        width: 310; height: parent.height
        color: "#303030"
        radius: 10

        x: -width;

        Behavior on x {
            NumberAnimation {
                target: menu_screen
                property: "x"
                easing.type: Easing.InOutQuad
                duration: 1000
            }
        }
    }

    Rectangle {
        id: click_button
        width: 50; height: 50
        color: "#303030"
        scale: m_area.pressed ? 1.1 : 1
        radius: 5

        x: menu_screen.x + menu_screen.width + 5; y: 5;

    }

    MouseArea {
        id: m_area
        anchors.fill: click_button
        onClicked : {
            menu_screen.x = menu_screen.x === -menu_screen.width ? -10 : -menu_screen.width
        }
    }
}

Answer 2

You are not defining animation for going back, so it will always be the same animation that is running on the clicked signal. I would recommend to use Behavior on x though. Try something like this.

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

Window {
    visible: true
    id: root
    width: 460; height: 640
    color: "white"
    property int duration: 3000
    property bool menu_shown: false

    Rectangle {
        id: menu_screen
        width: parent.width; height: parent.height
        color: "#303030"
        radius: 10

        x: -460;

        Behavior on x { NumberAnimation { } }
    }

    Rectangle {
        id: click_button
        width: 50; height: 50
        color: "#303030"
        scale: m_area.pressed ? 1.1 : 1
        radius: 5

        x: 5; y: 5;

        Behavior on x { NumberAnimation { } }
    }

    MouseArea {
        id: m_area
        anchors.fill: click_button
        onClicked : {
            click_button.x = click_button.x == 5 ? 305 : 5
            menu_screen.x = menu_screen.x == -460 ? -160 : -460
        }
    }
}

Also, as a side note, take a look at this in the meantime. :)