Parallel Animation



  • Hi all,

    I have this project. main.qml:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello Parallel Animation")
    
        BrightSquare {
          id: root
          width: 600
          height: 400
          property int duration: 3000
    
          Image {
              anchors.fill: parent
              source: "assets/ufo_background.png"
          }
    
          ClickableImageV3 {
              id: ufo
              x: 20; y: root.height-height
              text: 'ufo'
              source: "assets/ufo.png"
              onClicked: anim.restart()
          }
    
          ParallelAnimation {
              id: anim
              NumberAnimation {
                  target: ufo
                  properties: "y"
                  to: 20
                  duration: root.duration
              }
              NumberAnimation {
                  target: ufo
                  properties: "x"
                  to: 120
                  duration: root.duration
              }
          }
       }
    }
    

    In x: 20; y: root.height-height, root.height means root's height, but to which item does the other height belong please?

    As well as, why anim.restart() but not anim.start()?

    ClickableImageV3.qml:

    import QtQuick 2.8
    
    Item {
        id: root
        width: container.childrenRect.width + 16
        height: container.childrenRect.height + 16
        property alias text: label.text
        property alias source: image.source
        signal clicked
    
        Column {
            x: 8; y: 8
            id: container
            Image {
                id: image
            }
            Text {
                id: label
                width: image.width
                horizontalAlignment: Text.AlignHCenter
                wrapMode: Text.WordWrap
                color: "gray"
            }
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: root.clicked()
        }
    }
    
    

    In Text: Why should the width of text be like image.width!? The image is much wider than the text nonetheless!



  • @tomy hiho,

    To your questions:

    • height => if you don't specify an other item with a prefix like root.height you are adressing the current item, in this case ClickableImageV3

    • restart, If you call start on an already running animation it has no effect, restart is calling stop first and than start -> The animation should start from the beginning again when you click on the image during the animation.

    • Text, has the width of the Image sure, but the actual width of the printed text depends only on the pixelsize, font and dpi of your Monitor/Screen and number of chars, it is just reserving the width of the img for the text to be drawn before a wordwarp is applied.



  • @J.Hilk

    • restart, If you call start on an already running animation it has no effect, restart is calling stop first and than start -> The animation should start from the beginning again when you click on the image during the animation.

    When I run the program (ctrl + R), they (start or restart) don't have any difference! Both work the same.

    • Text, has the width of the Image sure, but the actual width of the printed text depends only on the pixelsize, font and dpi of your Monitor/Screen and number of chars, it is just reserving the width of the img for the text to be drawn before a wordwarp is applied.

    OK, thanks. When I make that line (width: image.width) a comment, the text is still shown; it's its position that changes! What relationship is between the width and the position of that item?



  • @tomy said in Parallel Animation:

    When I run the program (ctrl + R), they (start or restart) don't have any difference! Both work the same.

    That would be correct, like I said. Restart is equivalent {Stop(); Start()} If your animation is not running that start and restart will behave the same. But if your animation is running, Start() will have no effect link

    OK, thanks. When I make that line (width: image.width) a comment, the text is still shown; it's its position that changes! What relationship is between the width and the position of that item?

    In QML very few Items have a default size, and more often than not are not shown at all.

    Text is a bit different here. You have, techincally, a minimal width and height given by the String you want to draw and the font used.

    With no specific anchors or width&height given it defaults to the contentHeight & contentWidth.

    Actually thats not 100% true.
    Content-Width/Height is used to draw your Text but if you anchor any other Item to the bottom of your Textitem it will overlap your drawn Text as it sees the actual height as 0.

    You would have to specify the height e.g

    Text{
       text: "Some Text"
       height: contextHeight
    }
    


  • @J.Hilk said in Parallel Animation:

    Text is a bit different here. You have, techincally, a minimal width and height given by the String you want to draw and the font used.

    With no specific anchors or width&height given it defaults to the contentHeight & contentWidth.

    With no explicit width and height (or anchors) an Item will default to its implicitWidth and implicitHeight dimension. That's not specific to Text, not all Items provide implicit dimensions though.

    Content-Width/Height is used to draw your Text but if you anchor any other Item to the bottom of your Textitem it will overlap your drawn Text as it sees the actual height as 0.

    You would have to specify the height e.g

    Text{
       text: "Some Text"
       height: contextHeight
    }
    

    That's not true, you don't need to specify a height. By default it will have its height set to fit the text content.



  • @GrecKo said in Parallel Animation:

    You would have to specify the height e.g

    Text{
       text: "Some Text"
       height: contextHeight
    }
    

    That's not true, you don't need to specify a height. By default it will have its height set to fit the text content.

    You are correct, just tested it in a simple example.
    I'm not sure why I thought differently. Maybe my Text-Item was in a GridLayout and that hat issues when no explicit height was given? Because I'm pretty sure I had some issues when I did not give my Text-Item a height in the past.



  • OK, Text has a default size (height and width) used in this example, but what does horizontalAlignment: Text.AlignHCenter mean? When I don't use any explicit width/height, that alignment changes! It's odd to me.



  • @tomy it shouldn't :-)
    without a specific height and/or width, the Text-item is exactly big enough to fit your text-Element, and any text alignment is basicaly useless, ignored or results in the same position.

    If you make it bigger, you have to tell it where to draw the text. IIRC, the default alignment is to the upper left corner.
    If your Text-element spans the whole screen width, you can tell QML to center the text of the Text-Item in the middle or anywhere else, using : horizontalAlignment: and verticalAlignment:properties


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.