Parallel Animation

tomy

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!

J.Hilk

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

tomy

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

J.Hilk

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

GrecKo

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

J.Hilk

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

tomy

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.

J.Hilk

@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