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. Animating button press
Forum Updated to NodeBB v4.3 + New Features

Animating button press

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 4 Posters 14.1k 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.
  • J Offline
    J Offline
    jech
    wrote on last edited by
    #1

    Hello, I have a very simple question. I'd like to animate a button press. I would like to zoom out and back the button (a rectangle with a text). I don't know how to start the animation. I could do it using states and a timer. But I do believe there is a simpler way of doing it.

    1 Reply Last reply
    0
    • P Offline
      P Offline
      parancibia
      wrote on last edited by
      #2

      check this, is a simple sample, but is a good start

      @
      import Qt 4.7

      Rectangle {
      id: screen
      width: 200
      height: 200

      Rectangle {
          id: redRect
          width: 100; height: 100
          color: "red"
          anchors.horizontalCenter: screen.horizontalCenter
          anchors.verticalCenter: screen.verticalCenter
          
          MouseArea { id: mouseArea; anchors.fill: parent }
          
          states: State {
              name: "pressed"; when: mouseArea.pressed
              PropertyChanges { target: redRect; scale: 1.2 }
          }
          
          transitions: Transition {
              NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
          }
      }
      

      }
      @

      1 Reply Last reply
      0
      • V Offline
        V Offline
        volvo14
        wrote on last edited by
        #3

        i want an animation button too but how ???

        1 Reply Last reply
        0
        • P Offline
          P Offline
          parancibia
          wrote on last edited by
          #4

          [quote author="volvo14" date="1293134847"]i want an animation button too but how ???[/quote]

          First create a Button.qml file in your solution with this code

          @
          import Qt 4.7

          Item {
          id: container
          signal clicked
          property string text

          Rectangle {
              id: redRect
              width: container.width
              height: container.height
              color: "red"
          
              MouseArea {
                  id: mouseArea;
                  anchors.fill: parent
                  onClicked: {
                      container.clicked();
                  }
              }
          
              Text {
                  color: "#fff"
                  anchors.centerIn: redRect
                  font.pixelSize: 12
                  text: container.text
              }
          
              states: State {
                  name: "pressed"; when: mouseArea.pressed
                  PropertyChanges { target: redRect; scale: 1.2 }
              }
          
              transitions: Transition {
                  NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
              }
          }
          

          }
          @

          Then, create a instance of the button in your solution

          @
          import Qt 4.7

          Rectangle {
          id: screen
          width: 200
          height: 200

          Button {
              width: 100;
              height: 25;
              text: 'Hello World';
              anchors.horizontalCenter: screen.horizontalCenter;
              anchors.verticalCenter: screen.verticalCenter;
          }
          

          }
          @

          For more information check this "article":http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html

          1 Reply Last reply
          0
          • X Offline
            X Offline
            xsacha
            wrote on last edited by
            #5

            @scale: loc.pressed ? 0.5 : 1.0
            Behavior on scale { NumberAnimation {duration: 500 } }
            MouseArea { id: loc; anchors.fill: parent }@

            This is the simplest way. It will just quickly add animated zoom on click to your existing rectangle/button.

            Don't really have to worry about states and so on unless you're doing more with the MouseArea.

            • Sacha
            1 Reply Last reply
            0
            • J Offline
              J Offline
              jech
              wrote on last edited by
              #6

              The problem with your examples is that the button is only animated when it is held. Unfortunately this doesn't work on Windows 7 tablet PC at all, because long press is treated like a right mouse click and not registered.

              The only working solution I found is this:

              file Button.qml

              @import Qt 4.7

              Item {
              id: container
              signal clicked
              property string text

              Rectangle {
                  id: buttonRectangle
                  width: container.width
                  height: container.height
                  color: "red"
              
                  MouseArea {
                      id: mouseArea;
                      anchors.fill: parent
                      onClicked: {
                          buttonRectangle.state = "pressed"
                          stateTimer.start()            
                          container.clicked()
                      }
                  }
              
                  Text {
                      color: "#fff"
                      anchors.centerIn: buttonRectangle
                      font.pixelSize: 12
                      text: container.text
                  }
              
                  states: State {
                      name: "pressed"
                      PropertyChanges { target: buttonRectangle; scale: 0.7 }
                  }
              
                  Timer {
                      id: stateTimer
                      interval: 200;
                      repeat: false
                      onTriggered: buttonRectangle.state = 'State0'
                  }
              
                  transitions: Transition {
                      NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
                  }
              }
              

              }@

              But I do believe there should be an easier way to implement this behavior of the button.

              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