Question

我想创建一个水平滚动文本动画（在右侧输入，在屏幕上输入，在左侧退出，重复）。

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

问题是，我的文字很奇怪。出现在左侧，向左滚动两个字符，重复......绑定时出现问题 from: scrollLine.width; to: -scrollText.width，但我不知道是什么。

Answer 1

啊，这太奇怪了！：）

我能看到的第一件事就是这个

x: scrollLine.width

什么都不做。 NumberAnimation立即运行，导致设置x的{{1}}值，因此我们可以删除该代码，以便更轻松地找到问题。

接下来要做的是打印出项目的Text：

width

这给了我们：

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

好的，文本大小改变宽度很奇怪，但是......间接取决于窗口的大小，对吗？我们将其qml: text width 72.078125 qml: rectangle height 160 qml: text width 443.734375设置为font.pixelSize。恰好在parent.height * 0.5获得其初始大小后确定窗口大小。但是，作为一种声明性语言，您认为这应该有效。

让我们检查动画的Text和from值：

to

现在我们得到：

onFromChanged: print("from", from)
onToChanged: print("to", to)

他们最初是不正确的，当然，但他们最终会变得正确。这闻起来像一个臭虫。通过打印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的{{1}}位置进行仔细检查：

那不对。这似乎是个bug。我也认为是这样，但后来我检查了documentation：

如果NumberAnimation是在Transition或Behavior中定义的，则此值默认为Transition的起始状态中定义的值，或者触发Behavior时属性的当前值。

您没有使用Text，但语法看起来非常相似。更多搜索显示documentation for the on keyword：

加载矩形后动画立即开始，并自动应用于x和y值。

所以，它不是一个错误。您必须以某种方式为动画提供合理的qml: x -0.576625 ... qml: x -71.4654609375和Behavior值。一种解决方案是对值进行硬编码：

from

尽管如此，最好的解决方案可能不是依赖于窗口to的字体大小。 Qt选择的默认字体大小在提供合理DPI信息的所有平台上都清晰可辨，因此您最好将其乘以某个因素：

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

Answer 2

您的代码可以通过一些修改按预期工作。我没有使用font.pixelSize: parent.height*0.5，而是使用固定大小的点。试试这个

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

如何在NumberAnimation中正确地将值绑定到'from'和'to'？

2 个答案: