Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. General talk
  3. Brainstorm
  4. need suggestions for transition/animation of banner

need suggestions for transition/animation of banner

Scheduled Pinned Locked Moved Solved Brainstorm
7 Posts 3 Posters 658 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mzimmers
    wrote on 31 Jan 2023, 00:22 last edited by
    #1

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

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sierdzio
      Moderators
      wrote on 31 Jan 2023, 06:09 last edited by
      #2

      You can make it slide using NumberAnimation or AnchorAnimation

      (Z(:^

      M 1 Reply Last reply 31 Jan 2023, 14:17
      1
      • S sierdzio
        31 Jan 2023, 06:09

        You can make it slide using NumberAnimation or AnchorAnimation

        M Offline
        M Offline
        mzimmers
        wrote on 31 Jan 2023, 14:17 last edited by
        #3

        @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 1 Reply Last reply 31 Jan 2023, 14:31
        0
        • M mzimmers
          31 Jan 2023, 14:17

          @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 Offline
          J Offline
          J.Hilk
          Moderators
          wrote on 31 Jan 2023, 14:31 last edited by
          #4

          @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()
                  }
              }
          }
          

          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          M 1 Reply Last reply 31 Jan 2023, 19:00
          3
          • J J.Hilk
            31 Jan 2023, 14:31

            @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()
                    }
                }
            }
            
            M Offline
            M Offline
            mzimmers
            wrote on 31 Jan 2023, 19:00 last edited by
            #5

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

            1 Reply Last reply
            0
            • S Offline
              S Offline
              sierdzio
              Moderators
              wrote on 1 Feb 2023, 06:33 last edited by
              #6

              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.

              (Z(:^

              M 1 Reply Last reply 1 Feb 2023, 14:14
              2
              • S sierdzio
                1 Feb 2023, 06:33

                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.

                M Offline
                M Offline
                mzimmers
                wrote on 1 Feb 2023, 14:14 last edited by
                #7

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

                1 Reply Last reply
                2

                3/7

                31 Jan 2023, 14:17

                • Login

                • Login or register to search.
                3 out of 7
                • First post
                  3/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved