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

Posted 2023-02-16

【中文标题】我未能在 QML 中滑动屏幕动画

【英文标题】：I failed to slide screen animation in 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()
        

    

【参考方案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