Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Animation on changing anchor property [Solved]
Forum Updated to NodeBB v4.3 + New Features

Animation on changing anchor property [Solved]

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 3 Posters 6.2k Views 1 Watching
  • 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.
  • L Offline
    L Offline
    luca
    wrote on last edited by
    #1

    Hi all,
    I have this situation:
    @
    Rectangle {

    id: window
    width: 800
    height: 600
    
    property string statoattuale: "statologin"
    
    FrecciaSx {
        id: frecciasx
        anchors {
            left: window.left
            verticalCenter: window.verticalCenter
        }
    }
    
    FrecciaDx {
        id: frecciadx
        anchors {
            right: window.right
            verticalCenter: window.verticalCenter
        }
    }
    
    PagePanel {
        id: panelpage
        state: statoattuale
        anchors {
            //left: window.left
            leftMargin: frecciasx.width
            //right: window.right
            rightMargin: frecciadx.width
            //top: window.top
            //bottom: window.bottom
            fill: window
    
        }
    }
    

    }
    @

    Now I'd like to hide in some situations the items FrecciaSx and FrecciaDx behind the PagePanel.
    To do that I'm trying with:
    @
    states: [
    State {
    name: "statologin"

            PropertyChanges {
                target: frecciasx
                anchors.left: panelpage.left
                restoreEntryValues: true
            }
            PropertyChanges {
                target: frecciadx
                anchors.right: panelpage.right
                restoreEntryValues: true
            }
        }
    ]
    

    @

    It works but I don't know how to animate the movements when hiding the two items.

    Is there a solution?

    1 Reply Last reply
    0
    • Z Offline
      Z Offline
      zanes
      wrote on last edited by
      #2

      you can try

      @transitions:
      Transition{
      from:*
      to:"statologin"
      NumberAnimation{target: frecciadx;duration:100;easing.type:Easing.outExpo}
      }
      @
      and i guess, Behavior should also work on anchors
      Add the following to frecciadx and frecciasx
      @Behaviour on anchors{
      NumberAnimation{easing.type:Easing.OutExpo;duration:1000}
      }@

      1 Reply Last reply
      0
      • L Offline
        L Offline
        luca
        wrote on last edited by
        #3

        Thanks but the solutions doesn't seems to works.

        The first one do nothing without warning or error messages.

        With the second one my application stops and I get this message:
        @
        Invalid property assignment: "anchors" is a read-only property
        Behavior on anchors{
        ^
        @

        1 Reply Last reply
        0
        • L Offline
          L Offline
          luca
          wrote on last edited by
          #4

          I know I should position the FrecciaSx and FrecciaDx and set their x propery to move behind the PagePanel but I'd like to position the items with anchor property because I want keep scaling when moving main windows dimensions...

          1 Reply Last reply
          0
          • D Offline
            D Offline
            deimos
            wrote on last edited by
            #5

            you must use AnchorChanges in states and AnchorAnimation to animate the changes in transitions

            1 Reply Last reply
            0
            • L Offline
              L Offline
              luca
              wrote on last edited by
              #6

              [quote author="deimos" date="1322998581"]you must use AnchorChanges in states and AnchorAnimation to animate the changes in transitions[/quote]

              Thanks deimos, it works!

              This is the code I used:
              @
              states: [
              State {
              name: "statologin"

                      AnchorChanges {
                          target: frecciasx
                          anchors.left: panelpage.left
                      }
                      AnchorChanges {
                          target: frecciadx
                          anchors.right: panelpage.right
                      }
                  },
                  State {
                      name: "statoriepilogo"
                  }
              ]
              
              transitions:
                 Transition{
                    AnchorAnimation{
                    duration:1000
                    }
               }
              

              @

              1 Reply Last reply
              0

              • Login

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