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

此外，作为旁注，请同时查看 this。 :)

Answer 2

当主 window 调整大小时，menu_screen 在 window 的左侧可见。在我看来，这不是预期的。此外，您不需要为 menu_screen 和 click_button 定义行为，但您可以绑定 click_button 的 x 属性，如下所示.这样，当菜单屏幕动画时，按钮也会动画。您还可以使用 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
        }
    }
}

我在QML中滑动屏幕动画失败

I failed to slide screen animation in QML

javascript

animation

qt

qml