QML Keep transition during the x seconds on mousearea Pressed once-CodePudding

I checked the different mouseArea events in the documentation and there is no chance to execute a function while a mouseArea is being pressed once. I want to keep the transition for 5 seconds and after 5 seconds it should out back.

Here is what i'm trying

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
            name: "moved"; when: mouseArea.pressed
            PropertyChanges { target: bottomBar; x: 0; y: 411}
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; }
    }
}

i want to keep bottomBar on x:0 y:411 for 5 seconds

Thanks to @iam_peter we figured out the solution. I share the solution below. I also added 2 rowlayouts on this bottomBar and wanted to have 4 images with good alignment and i did. Now i want to make this images clickable and bring the ui to another qmls.(i am using stack view for that)

property string initializePage : "MainMenu.qml"
property string lightningPage : "LightningMenu.qml"
property string timerPage : "Timer.qml"

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onPressed: SequentialAnimation {
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 411
            }

            PropertyAnimation {
                targets: [bottomRowLeft,bottomRowRight]
                property: "opacity"
                to: 1
            }


            PauseAnimation {
                duration: 5000
            }


            PropertyAnimation {
                targets: [bottomRowLeft,bottomRowRight]
                property: "opacity"
                to: 0
            }


            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 431
            }


        }
    }
}



RowLayout{
    id: bottomRowLeft
    anchors {
        left: bottomBar.left
        bottom: bottomBar.bottom
    }
    anchors.bottomMargin: 45
    anchors.leftMargin: 175
    spacing: 10
    opacity: 0

    //Home Icon
    Image{
        source: "/images/homeButtonIcon.png"
    }
        MouseArea{
            id: homeClicked
            Layout.fillWidth: true
            onClicked: {
                stackViewTool.replace(Qt.resolvedUrl("MainMenu.qml")) // not working
            }

        }

    Image{
        source:"/images/removeButtonIcon.png"
    }
        MouseArea{
            id: removeClicked
            Layout.fillWidth: true
        }
}

RowLayout{
    id: bottomRowRight
    anchors {
        left: bottomRowLeft.right
        bottom: bottomBar.bottom
    }
    anchors.bottomMargin: 45
    anchors.leftMargin: 215
    spacing: 10
    opacity: 0

    //Home Icon
    Image{
        source: "/images/cancelButtonIcon.png"
    }
        MouseArea{
            id: cancelClicked
            Layout.fillWidth: true
        }

    Image{
        source:"/images/applyButtonIcon.png"
    }
        MouseArea{
            id: applyClicked
            Layout.fillWidth: true
            onClicked: {
                stackViewTool.replace(lightningPage)
            }
        }
}


StackView {
    id: stackViewTool
    anchors {
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: bottomBar.top
    }
    initialItem: initializePage

}

CodePudding user response：

You want to trigger an animation on MouseArea press, then the property should change, pause and go back to the previous value?

Rectangle {
    id: bottomBar
    x: 0
    y: 431
    width: 800
    height: 100
    visible: true
    color: "#d0e8f5"
    radius: 32
    border.width: 0
    clip: false

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onPressed: SequentialAnimation {
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 411
            }
            PauseAnimation {
                duration: 5000
            }
            PropertyAnimation {
                target: bottomBar
                property: "y"
                to: 431
            }
        }
    }
}

CodePudding user response：

The issue on your example is that the MouseArea isn't filling the Image you should use anchors.fill and make the MouseArea a child of the Image. Currently it is also layouted by the RowLayout which you might want but doesn't make sense if you want to make the images button-like. I came up with this solution which might be what you want. This is just a guess.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: root

    color: "white"
    width: 800
    height: 600
    visible: true

    component SimplePage: Rectangle {
        property alias name: pageText.text
        width: root.width
        height: 200
        color: "lightgrey"

        Text {
            id: pageText
            anchors.centerIn: parent
            font.pixelSize: 40
        }
    }

    component SimpleButton: Rectangle {
        property alias letter: buttonText.text
        signal clicked

        color: "grey"
        width: 40
        height: 40

        Text {
            id: buttonText
            anchors.centerIn: parent
            font {
                pixelSize: 20
                bold: true
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: parent.clicked()
        }
    }

    Component {
        id: initializePage

        SimplePage { name: "initialize" }
    }

    Component {
        id: lightningPage

        SimplePage { name: "lightning" }
    }

    Component {
        id: timerPage

        SimplePage { name: "timer" }
    }

    Rectangle {
        id: bottomBar
        x: 0
        y: 431
        width: 800
        height: 100
        visible: true
        color: "#d0e8f5"
        radius: 32
        border.width: 0
        clip: false

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onPressed: SequentialAnimation {
                PropertyAnimation {
                    target: bottomBar
                    property: "y"
                    to: 411
                }

                PropertyAnimation {
                    targets: [bottomRowLeft,bottomRowRight]
                    property: "opacity"
                    to: 1
                }

                PauseAnimation {
                    duration: 5000
                }

                PropertyAnimation {
                    targets: [bottomRowLeft,bottomRowRight]
                    property: "opacity"
                    to: 0
                }

                PropertyAnimation {
                    target: bottomBar
                    property: "y"
                    to: 431
                }
            }
        }
    }

    RowLayout {
        id: bottomRowLeft
        anchors {
            left: bottomBar.left
            bottom: bottomBar.bottom
        }
        anchors.bottomMargin: 45
        anchors.leftMargin: 175
        spacing: 10
        opacity: 0

        // Home
        SimpleButton {
            letter: "H"
            onClicked: stackViewTool.replace(initializePage)
        }
        // Remove
        SimpleButton {
            letter: "R"
        }
    }

    RowLayout {
        id: bottomRowRight
        anchors {
            left: bottomRowLeft.right
            bottom: bottomBar.bottom
        }
        anchors.bottomMargin: 45
        anchors.leftMargin: 215
        spacing: 10
        opacity: 0

        // Cancel
        SimpleButton {
            letter: "C"
        }
        // Apply
        SimpleButton {
            letter: "A"
            onClicked: stackViewTool.replace(lightningPage)
        }
    }

    StackView {
        id: stackViewTool
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: bottomBar.top
        }
        initialItem: initializePage
    }
}