Unsolved 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 caseClickableImageV3
-
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.
-
-
- 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
andheight
(oranchors
) anItem
will default to itsimplicitWidth
andimplicitHeight
dimension. That's not specific toText
, 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 yourtext
-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:
andverticalAlignment:
properties