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

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.qml

    import QtQuick 2.1
    import QtQuick.Controls 1.0
    import QtQuick.Layouts 1.0
    import "Style.js" as Style
    import "Theme.js" as Theme

    Item {
    id: root

    Bg {                                //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.qml

    import QtQuick 2.1
    import QtQuick.Controls 1.0

    Item{
    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.color

    width: 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.qml

    import QtQuick 2.1
    import QtQuick.Layouts 1.0
    import "Style.js" as Style

    Item {
    id: popupMenuHandle
    width: 400
    height: 480
    x: 400
    opacity: enabled
    z: 10

    Rectangle {
        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);}
    }
    

    }
    @


Log in to reply