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. [Solved] NumberAnimation: "running" not accessible inside of a transition?
Forum Updated to NodeBB v4.3 + New Features

[Solved] NumberAnimation: "running" not accessible inside of a transition?

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 2.6k 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.
  • S Offline
    S Offline
    skolibri
    wrote on last edited by
    #1

    Hello guys,

    i'm a newby in QML and just faced following problem: i have an object which has two different states. There is a transition which defines a NumberAnimation when the object changes the state. Now i want to be able to control whether this animation should be running or not. I placed additional button (id:animSwitch) with a boolean flag "isAnim". Then, i tried to make the "running" property of the NumberAnimation dependent of this (running: animSwitch.isAnim). Unfortunately it doesn't work :( Even if i set it directly to false there, it is running anyway.. How i could solve this issue? Here is the code:

    @
    import Qt 4.7

    Item {
    id: myItem
    width: 400
    height: 400

    Rectangle {
    id:rect
    width: 50; height: 50
    color: "magenta"
    x: 10; y: 50
    }

    states: [
        State {
            name: "RightDown"
            PropertyChanges {
                target: rect
                x: 200; y: 200
            }
        },
        State {
            name: "LeftUp"
            PropertyChanges {
                target: rect
                x: 10; y: 50
            }
        }
    ]
    
    transitions: [
        Transition {
            from: "*";
            to: "*"
            NumberAnimation {
                running: animSwitch.isAnim // here i want to switch on/off the animation BUT IT DOESN'T WORK :(
                properties: "x, y";
                duration: 2000;
                easing.type: Easing.OutExpo;
            }
        }
    ]
    
    //button to move the rectangle
    Rectangle {
        id: button
        width: 60; height: 30
        anchors {bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin:20}
        color: "grey"
        radius: 5
    
        Text {
            text: "move"
            color: "white"
            font.bold: true
            font.pixelSize: 14
            anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
        }
    
        MouseArea {
            anchors.fill: parent
            property bool isDown: false
    
            onClicked: {
                if(isDown) {
                    myItem.state = 'LeftUp';
                    isDown = false;
                }
                else {
                     myItem.state = 'RightDown';
                     isDown = true;
                }
            }
        }
    }
    
    // Button "anim on/off" to control if the animation should be running or not
    Rectangle {
        id: animSwitch
        width: 60; height: 30
        anchors {left: button.right; bottom: parent.bottom; leftMargin:20; bottomMargin:20}
        color: "grey"
        radius: 5
    
        property bool isAnim: false
    
        Text {
            id: buttonLabel
            text: "anim on"
            color: "white"
            font.bold: true
            font.pixelSize: 14
            anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
        }
    
        states: State {
            name: "running"
            when: animSwitch.isAnim
            PropertyChanges { target: buttonLabel; text: "anim off" }
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                animSwitch.isAnim = !animSwitch.isAnim
            }
        }
    }
    

    }
    @

    Thanks for any tips and hints in advance!

    1 Reply Last reply
    0
    • I Offline
      I Offline
      infidel
      wrote on last edited by
      #2

      You can use Behavior and PropertyAnimation elements for this instead of transitions. See below a modified example from your original code.

      You could also remove running property from you NumberAnimation element and define the duration to be

      @duration: if ( animSwitch.isAnim ) { 2000; } else { 0; }@

      but that's a bit ugly.

      Example of using Behavior:

      @
      import Qt 4.7

      Item {
      id: myItem
      width: 400
      height: 400

      Rectangle {
      id:rect
      width: 50; height: 50
      color: "magenta"
      x: 10; y: 50

           Behavior on x {
               enabled: animSwitch.isAnim
               PropertyAnimation { duration: 200 }
           }
           Behavior on y {
               enabled: animSwitch.isAnim
               PropertyAnimation { duration: 200 }
           }
       }
      
      states: [
          State {
              name: "RightDown"
              PropertyChanges {
                  target: rect
                  x: 200; y: 200
              }
          },
          State {
              name: "LeftUp"
              PropertyChanges {
                  target: rect
                  x: 10; y: 50
              }
          }
      ]
      
      //button to move the rectangle
      Rectangle {
          id: button
          width: 60; height: 30
          anchors {bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin:20}
          color: "grey"
          radius: 5
      
          Text {
              text: "move"
              color: "white"
              font.bold: true
              font.pixelSize: 14
              anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
          }
      
          MouseArea {
              anchors.fill: parent
              property bool isDown: false
      
              onClicked: {
                  if(isDown) {
                      myItem.state = 'LeftUp';
                      isDown = false;
                  }
                  else {
                       myItem.state = 'RightDown';
                       isDown = true;
                  }
              }
          }
      }
      
      // Button "anim on/off" to control if the animation should be running or not
      Rectangle {
          id: animSwitch
          width: 60; height: 30
          anchors {left: button.right; bottom: parent.bottom; leftMargin:20; bottomMargin:20}
          color: "grey"
          radius: 5
      
          property bool isAnim: false
      
          Text {
              id: buttonLabel
              text: "anim on"
              color: "white"
              font.bold: true
              font.pixelSize: 14
              anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
          }
      
          states: State {
              name: "running"
              when: !animSwitch.isAnim
              PropertyChanges { target: buttonLabel; text: "anim off" }
          }
      
          MouseArea {
              anchors.fill: parent
              onClicked: {
                  animSwitch.isAnim = !animSwitch.isAnim
              }
          }
      }
      

      }
      @

      1 Reply Last reply
      0
      • S Offline
        S Offline
        skolibri
        wrote on last edited by
        #3

        Hi infidel,

        thanks a lot for your solutions! both works :)

        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