need suggestions for transition/animation of banner

[mzimmers]

Hi all -

Under some circumstances, my app will display a banner across the screen, displacing (downward) the remainder of the display. Currently, I just toggle its visibility based on business logic, and it functions correctly, but the appearance/disappearance is a bit sudden.

I'd welcome suggestions for making the banner appearance a bit more...graceful. Any suggestions?

Thanks...

[sierdzio]

You can make it slide using NumberAnimation or AnchorAnimation

[mzimmers]

@sierdzio thanks for the suggestions. I've tried the AnchorAnimation (pretty much just copying the example on the page you linked), and there's no visible time lag to that one -- it just appears immediately. I'm not sure how to apply a NumberAnimation to a boolean property (visible) -- I've seen some attempts on SO, but they're not what I had in mind. I tried applying the NumberAnimation to the height property, but that doesn't show any visible animation either.

What I'd like is if the rectangle could "unfurl," preferably from top to bottom, and gradually displace the items below it. So far, though, I haven't been able to figure out how to do this.

[J.Hilk]

@mzimmers here, a quick example on how I would do it with the Behavior

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("test")

    Item {
        id: mainItem
        anchors.fill: parent

        Rectangle {
            id:banner
            anchors{
                left: parent.left
                right: parent.right
            }
            y: -height
            Behavior on y {
                NumberAnimation { duration: 500 }
            }
            height: mainItem.height * 0.2

            property bool isOpen: y == 0
            color: "darkred"
            function open() {
                banner.y = 0
            }

            function close () {
                banner.y = -height
            }
        }

        Button{
            anchors{
                left:parent.left
                right: parent.right
                bottom: parent.bottom
            }
            height: 60

            text: "Toggle Banner"

            onClicked: banner.isOpen ? banner.close() : banner.open()
        }
    }
}

[mzimmers]

@J-Hilk this is a good start. I modified your idea to work off of height rather than y, to preserve the banner's positioning within a ColumnLayout:

Item { // this Item is within a ColumnLayout.
    id: banner
    property int bannerHeight: 80

    height: (opMode.mode === OpModes.Service) || (navBar.tabIndex === 3) ? bannerHeight : 0
    Layout.fillWidth: true

    Rectangle {
    id: rect
        anchors.fill: parent
        
        Behavior on height {
            NumberAnimation { duration: 500 }
        }
        color: 'red'
        RowLayout {
            visible: (banner.height === bannerHeight)
            // some stuff in here
        }
    }
}

The banner appears and disappears now, but when it appears, it overlays, rather than displaces, the next item in the ColumnLayout. Any idea why that might be happening?

Thanks...

[sierdzio]

Ah, so you have this within a layout, that's going to interfere with manually changing x, y and sizes. Try changing and animating implicitHeight instead of height.

[mzimmers]

@sierdzio yes, that seemed to fix it.

Item { 
    id: banner
    property int bannerHeight: 80

    implicitHeight: (opMode.mode === OpModes.Service) || (navBar.tabIndex === 3) ? bannerHeight : 0
    Behavior on implicitHeight {
        NumberAnimation { duration: 250 }
    }
    Layout.fillWidth: true

    Rectangle {
    id: rect
        anchors {
            left: parent.left
            right: parent.right
        }
        implicitHeight: parent.implicitHeight
        ...
    }
}

I think I need to apply a similar animation to the opacity of the contents of the Rectangle (a couple lines of text and a Button), but I get the principle now.

Thanks to all for the help.