我未能在 QML 中滑动屏幕动画答案

【问题标题】：I failed to slide screen animation in QML我未能在 QML 中滑动屏幕动画
【发布时间】：2015-03-20 22:06:21
【问题描述】：

我想将菜单屏幕滑动到根矩形。菜单屏幕来自左侧，这没关系，但我无法再次将其发送回去。

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

    }
}

【问题讨论】：

标签： javascript qt animation qml

【解决方案1】：

您没有定义返回的动画，因此它始终是在 clicked 信号上运行的相同动画。我建议使用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。 :)

【讨论】：

【解决方案2】：

调整主窗口大小时，menu_screen 在窗口左侧可见。在我看来，这不是预期的。此外，您不需要为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
        }
    }
}

【讨论】：