Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Help with transitions



  • Here I have some code which toggles between two y positions for this Rectangle:

        Rectangle {
            id: theRectangle
            height: 75
            width: 150
            y : open ? 0 : 110
            color: open ? "blue" : "red"
            property bool open: true
    
            Behavior on y {
                NumberAnimation {
                    easing.type: Easing.InOutQuad
                    duration: 1000
                }
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: theRectangle.open = !theRectangle.open
            }
        }
    

    now what I would like to do is alter it s/t instead of clicking to get the Rectangle to go from y = 110 back too y = 0, it will instead simply do that after a period of time has elapsed where the element hasn't been touched, but I am not sure how to go about doing that. My Timer doesn't seem to be working:

        Item {
            anchors.fill: parent
            
            Timer {
                interval: 5000; running: true; repeat: true
                onTriggered: if(theRectangle.open === true){theRectangle.open == false}
            }
    
            Rectangle {
                id: theRectangle
                height: 75
                width: 150
                y : open ? 0 : 110
                color: open ? "blue" : "red"
                property bool open: true
    
                Behavior on y {
                    NumberAnimation {
                        easing.type: Easing.InOutQuad
                        duration: 1000
                    }
                }
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: theRectangle.open = !theRectangle.open
                }
            }
        }
    

    however, even if I can get it to work I need a way to toggle the time to reset if the user clicks the rectangle. Basically, I am attempting to model a menu that automatically hides if the user hasn't interacted with it in a given time duration.



  • Alright, it seems to be working like I want it with some small modifications:

        Item {
            anchors.fill: parent
            
            Timer {
                id: timer
                interval: 5000; running: true; repeat: true
                onTriggered:
                {
                    if(theRectangle.open === false)
                        theRectangle.open = !theRectangle.open
                }
            }
            
            Rectangle {
                id: theRectangle
                height: 75
                width: 150
                y : open ? 0 : 110
                color: open ? "blue" : "red"
                property bool open: true
                
                Behavior on y {
                    NumberAnimation {
                        easing.type: Easing.InOutQuad
                        duration: 1000
                    }
                }
                
                MouseArea {
                    anchors.fill: parent
                    onClicked:
                    {
                        if(theRectangle.open === true)
                            theRectangle.open = !theRectangle.open
                        timer.restart()
                    }
                }
            }
        }
    

Log in to reply