Мне не удалось вставить анимацию экрана в QML

Question

Я хочу сдвинуть экран меню к корневому прямоугольнику. Экран меню появляется с левой стороны, это нормально, но я не смог отправить его снова.

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

Вы не определяете анимацию для возврата, поэтому она всегда будет той же самой анимацией, которая запускается по сигналу нажатия. Я бы порекомендовал использовать Behavior on x хоть. Попробуйте что-то вроде этого.

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

Также, как примечание стороны, взгляните на это в то же время.:)

Answer 2

Когда главное окно изменяется, menu_screen становится видимым в левой части окна. Этого, на мой взгляд, не следует ожидать. Кроме того, вам не нужно определять поведение для обоих menu_screen и click_button, но вы можете связать x собственностью click_button как показано ниже. Таким образом, кнопка также анимируется, когда экран меню анимирован. Вы также можете использовать easing.type, duration и т.д. анимации, как показано здесь.

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