Solved Changing replaceEnter/Exit animation dynamically
-
Hi,
Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view.
Situation:
I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.
Please let me know, if there is any way of doing the same.
Thanks in advance.
Bikash
-
hi
@BikashRDas said in Changing replaceEnter/Exit animation dynamically:
how to change it dynamically depending on the next QML to be displayed.
StackView { id: stackview } Transition { id: anim ... } Button{ onClicked : stackview.pushEnter = anim }
@BikashRDas said in Changing replaceEnter/Exit animation dynamically:
I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.
example:
( I only did top and bottom for this example, you can complete it by adding Transitions for left and right animating x property )Window { id:root visible: true width: 640 height: 480 Component { id: topItem Rectangle{ color: "lightgrey" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Top Item") } } } Component { id: bottomItem Rectangle{ color: "lightblue" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("bottom Item") } } } Component { id: leftItem Rectangle{ color: "orange" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Left Item") } } } Component { id: rightItem Rectangle{ color: "blue" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Right Item") } } } StackView { id: stackview anchors{ top: parent.top bottom: parent.bottom left:parent.left right: menuButtons.left } initialItem: initialView //pushEnter: //define enter from top Transition { id: animFromTop PropertyAnimation { property: "y" from: -root.height to: 0 duration: 200 } } //define enter from bottom Transition { id: animFromBottom PropertyAnimation { property: "y" from: root.height to: 0 duration: 200 } } // define enter from left //todo // define enter from right //todo //pushExit: // assign in the button onClicked handler // define exit to bottom Transition { id:exitToBottom PropertyAnimation { property: "y" from: 0 to: root.height duration: 200 } } // define exit to top Transition { id:exitToTop PropertyAnimation { property: "y" from: 0 to: -root.height duration: 200 } } // define exit to Right //todo // define exit to Left //todo } Column{ id: menuButtons anchors.right: parent.right height: parent.height Button{ text: "Top" onClicked: { stackview.pushEnter = animFromTop stackview.pushExit = exitToBottom stackview.push(topItem) } } Button{ text: "Bottom" onClicked: { stackview.pushEnter = animFromBottom stackview.pushExit = exitToTop stackview.push(bottomItem) } } Button{ text: "Left" onClicked: { //todo } } Button{ text: "Right" onClicked: { //todo } } } }
-
hi
@BikashRDas said in Changing replaceEnter/Exit animation dynamically:
how to change it dynamically depending on the next QML to be displayed.
StackView { id: stackview } Transition { id: anim ... } Button{ onClicked : stackview.pushEnter = anim }
@BikashRDas said in Changing replaceEnter/Exit animation dynamically:
I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.
example:
( I only did top and bottom for this example, you can complete it by adding Transitions for left and right animating x property )Window { id:root visible: true width: 640 height: 480 Component { id: topItem Rectangle{ color: "lightgrey" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Top Item") } } } Component { id: bottomItem Rectangle{ color: "lightblue" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("bottom Item") } } } Component { id: leftItem Rectangle{ color: "orange" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Left Item") } } } Component { id: rightItem Rectangle{ color: "blue" height: stackview.height width: stackview.width Text { anchors.centerIn: parent text: qsTr("Right Item") } } } StackView { id: stackview anchors{ top: parent.top bottom: parent.bottom left:parent.left right: menuButtons.left } initialItem: initialView //pushEnter: //define enter from top Transition { id: animFromTop PropertyAnimation { property: "y" from: -root.height to: 0 duration: 200 } } //define enter from bottom Transition { id: animFromBottom PropertyAnimation { property: "y" from: root.height to: 0 duration: 200 } } // define enter from left //todo // define enter from right //todo //pushExit: // assign in the button onClicked handler // define exit to bottom Transition { id:exitToBottom PropertyAnimation { property: "y" from: 0 to: root.height duration: 200 } } // define exit to top Transition { id:exitToTop PropertyAnimation { property: "y" from: 0 to: -root.height duration: 200 } } // define exit to Right //todo // define exit to Left //todo } Column{ id: menuButtons anchors.right: parent.right height: parent.height Button{ text: "Top" onClicked: { stackview.pushEnter = animFromTop stackview.pushExit = exitToBottom stackview.push(topItem) } } Button{ text: "Bottom" onClicked: { stackview.pushEnter = animFromBottom stackview.pushExit = exitToTop stackview.push(bottomItem) } } Button{ text: "Left" onClicked: { //todo } } Button{ text: "Right" onClicked: { //todo } } } }
-
Thanks a lot @LeLev .