Slide In and Slide Out Animation QML



  • Hello all, please I have a challenge creating a slide out, slide in effect.

    I have created a qml component in a separate qml file from my main qml file, with details of its interface, the state that triggers the transition and the transition.

    In my main qml file I dynamically created the custom qml component to cover the screen, displaying information, and when new information becomes available, I create a new custom component dynamically, position it by the screen width to the left of the screen , and set the state of both components (the new and the existing component) that triggers their transition, to create an effect of the new component pushing out the old one and with the new now covering the screen. When new information becomes available again, I destroy the last component pushed out, and repeat the process.

    The program just does not work, any help would be really appreciated. Thanks

    Below is an idealization of what the custom component looks like

    Rectangle {
        id: main
        width: parent.width
        height: parent.height
        color: "blue"
    
        property bool startSliding: false
    
        states: State {
            name: "slideOut"; when: main.startSliding
            PropertyChanges { target: main; x: (x + main.width); y: 0 }
        }
    
        transitions: Transition {
            to: "slideOut"
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400 }
       }
    

  • Moderators

    @Automata Silly question probably, did you set main.startSliding to true ?



  • Solved now!
    Happened I had to create 2 states and 2 transitions, yipee!

    states: [
            State {
                name: "moveOut"; when: main.moveOut
                PropertyChanges { target: main; x: width; y: 0 }
            },
            State {
                name: "moveIn"; when: main.moveIn
                PropertyChanges { target: main; x: 0; y: 0 }
            }
        ]
    
        transitions: [
            Transition {
                to: "moveOut"
                NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400; loops: 1 }
            },
            Transition {
                to: "moveIn"
                NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400; loops: 1 }
            }
        ]
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.