Unsolved Animated transitions for dynamically created items
-
I am looking to add animated transitions for dynamically created and destroyed popups on my main screen and am unsure of how to integrate them successfully. Ideally, they would have sort of a drawer appearance where they would slide open from the right edge of the page toward the center. HandleConfig.qml is the popup that is created and destroyed(and needing the animated transition added) when the instance is navIconBox Popup button is clicked
I am using Qt 5.1.1, Qt Quick 2.1, for embedded linux. thank you!
Here is the code:
@
main.qmlimport QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import "Style.js" as Style
import "Theme.js" as ThemeItem {
id: rootBg { //Basic rectangle setting the background color of the main screen id:bg } TitleBar { //TitleBar items id: titlebar } RowLayout { //Main row Layout for persistent block and tiles with content deleted for viewing on forum } Item { id: handlepop4 y: 386 x: 706 height: 90 width: 90 z: 5 opacity: enabled? 1: .3 //disabled state} property variant handle4; signal clicked4(); NavIcon { id: navIcon4 opacity: enabled? 1: .3 //disabled state} iconSource: "../images/icon_HandleConfig.png" height: 90 width: 90 iconBGColor: "blue" iconBGHeight: height iconBGWidth: width iconBGRadius: 5 } MouseArea { anchors.fill: navIcon4 onPressed: parent.opacity = 0.5 onReleased: parent.opacity = 1 onCanceled: parent.opacity = 1 onClicked: { var component = Qt.createComponent("HandleConfig.qml"); handlepop4.handle4 = component.createObject(root); } } }
}
@NavIcon.qml contains the basic icon and background rectangle for the button
@
NavIcon.qmlimport QtQuick 2.1
import QtQuick.Controls 1.0Item{
id: navIconBox
property alias iconSource: navIcon.source
property alias iconBGWidth: navRect.width
property alias iconBGHeight: navRect.height
property alias iconBGRadius: navRect.radius
property string iconBGColor: navRect.colorwidth: 100 height: 100 Rectangle { id: navRect width: 90 height: 90 radius: 5 color: iconBGColor // Component.onCompleted: {Style.styleMenuPopBg(navRectHandle);} } Image { id: navIcon fillMode: Image.PreserveAspectFit anchors.centerIn: navRect }
}
@
HandleConfig.qml is the popup itself that needs transition when created and then destroyed with the close button inside of it
@
HandleConfig.qmlimport QtQuick 2.1
import QtQuick.Layouts 1.0
import "Style.js" as StyleItem {
id: popupMenuHandle
width: 400
height: 480
x: 400
opacity: enabled
z: 10Rectangle { id: popupbgHandle width: popupMenuHandle.width height: popupMenuHandle.height anchors.fill: parent Component.onCompleted: {Style.styleMenuPopBg(popupbgHandle);} } Rectangle { id: closePopupHandle height: 50 width: 50 anchors.right: popupbgHandle.right opacity: enabled? 1: 0.3 property variant win; signal clicked(); MouseArea { anchors.fill: parent onPressed: parent.opacity = 0.5 // down state onReleased: parent.opacity = 1 onCanceled: parent.opacity = 1 onClicked: { closePopupHandle.clicked(); // emit popupMenuHandle.destroy(); } } } Text { id: closeIconHandle text: "X" anchors.horizontalCenter: closePopupHandle.horizontalCenter anchors.verticalCenter: closePopupHandle.verticalCenter font.pointSize: 40 font.family: "Segoe UI" font.weight: Font.Light Component.onCompleted: {Style.styleCloseButtonIcon(closeIconHandle);} }
}
@