How to properly bind values to 'from' and 'to', inside a NumberAnimation? - qml

Question

I want to create a horizontal scrolling text animation (enter at the right side, go through the screen, exit at the left side, repeat).
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
id: root
visible: true
Rectangle {
id: scrollLine
anchors.fill: parent
color: "black"
Text {
id: scrollText
color: "white"
text: "This is a test"
font.pixelSize: parent.height * 0.5
anchors.verticalCenter: parent.verticalCenter
x: scrollLine.width
NumberAnimation on x {
id: scrollAnimation
from: scrollLine.width; to: -scrollText.width
duration: 5000
loops: Animation.Infinite
running: true
}
}
}
}
The problem is, that my text acts weird. Appears left side, scrolls left with two characters, repeat... Something is wrong at the binding
from: scrollLine.width; to: -scrollText.width,
but I have no idea what.

Answer 1

Ah, this is weird! :)
The first thing I can see is that this
x: scrollLine.width
does nothing. The NumberAnimation runs immediately, causing the x value of the Text to be set, so we can remove that code to make it easier to find the problem.
The next thing to do is to print out the widths of the items:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
id: root
visible: true
Rectangle {
id: scrollLine
anchors.fill: parent
color: "black"
onHeightChanged: print("rectangle height", height)
Text {
id: scrollText
color: "white"
text: "This is a test"
font.pixelSize: parent.height * 0.5
anchors.verticalCenter: parent.verticalCenter
onWidthChanged: print("text width", width)
NumberAnimation on x {
id: scrollAnimation
from: scrollLine.width
to: -scrollText.width
duration: 5000
loops: Animation.Infinite
running: true
}
}
}
}
That gives us:
qml: text width 72.078125
qml: rectangle height 160
qml: text width 443.734375
Ok, it's weird that the text size changes width, but... it indirectly depends on the size of the window, right? We set its font.pixelSize to parent.height * 0.5. It just so happens that the window size is determined after the Text gets its initial size. However, being a declarative language, you'd think this should work.
Let's check the from and to values of the animation:
onFromChanged: print("from", from)
onToChanged: print("to", to)
Now we get:
qml: from 0
qml: to 0
qml: text width 72.078125
qml: to -72.078125
qml: from 160
qml: rectangle height 160
qml: text width 443.734375
qml: to -443.734375
They are initially incorrect, sure, but they do eventually become correct. This smells like a bug. Let's double check by printing out the x position of the Text:
qml: x -0.576625
...
qml: x -71.4654609375
That's not right. It seems like a bug. I thought it was, too, but then I checked the documentation:
If the NumberAnimation is defined within a Transition or Behavior, this value defaults to the value defined in the starting state of the Transition, or the current value of the property at the moment the Behavior is triggered.
You're not using a Behavior, although the syntax looks very similar. A bit more searching reveals the documentation for the on keyword:
The animation starts as soon as the rectangle is loaded, and will automatically be applied to its x and y values.
So, it's not a bug. You'll have to give the animation sensible from and to values somehow. One solution is to hard-code the values:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
id: root
width: 250
height: 250
visible: true
Rectangle {
id: scrollLine
anchors.fill: parent
color: "black"
Text {
id: scrollText
color: "white"
text: "This is a test"
font.pixelSize: parent.height * 0.5
anchors.verticalCenter: parent.verticalCenter
NumberAnimation on x {
id: scrollAnimation
from: root.width
to: -1000
duration: 5000
loops: Animation.Infinite
running: true
}
}
}
}
The best solution would probably be not to rely on the window's height for the font size, though. The default font size chosen by Qt is legible on all platforms that provide sensible DPI information, so you would be better off multiplying that by some factor:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
id: root
width: 250
height: 250
visible: true
Rectangle {
id: scrollLine
anchors.fill: parent
color: "black"
FontMetrics {
id: fontMetrics
}
Text {
id: scrollText
color: "white"
text: "This is a test"
font.pixelSize: fontMetrics.font.pixelSize * 8
anchors.verticalCenter: parent.verticalCenter
NumberAnimation on x {
id: scrollAnimation
from: root.width
to: -1000
duration: 5000
loops: Animation.Infinite
running: true
}
}
}
}

Answer 2

You code works as expected with a little modification. Instead of using font.pixelSize: parent.height*0.5, I used a fixed size point. Try this
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
id: root
visible: true
Rectangle {
id: scrollLine
anchors.fill: parent
color: "black"
Text {
id: scrollText
color: "white"
text: "This is a test"
font.pixelSize: 150; //////// Changed this
anchors.verticalCenter: parent.verticalCenter
x: scrollLine.width
NumberAnimation on x {
id: scrollAnimation
from: scrollText.width; to: -scrollText.width
duration: 5000
loops: Animation.Infinite
running: true
}
}
}
}