如何在数字动画中将值正确绑定到'from'和"to"？

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

问题是，我的短信表现得很奇怪。出现在左侧，向左滚动两个字符，重复。。。装订处出了问题CCD_ 1，但我不知道是什么。

Answer 1

啊，这太奇怪了！：）

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

x: scrollLine.width

什么也不做。NumberAnimation立即运行，导致Text的x值被设置，因此我们可以删除该代码，以便更容易地发现问题。

接下来要做的是打印出项目的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和from: scrollLine.width; to: -scrollText.width0值：

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

当然，它们最初是不正确的，但最终会变得正确。这闻起来像虫子。让我们通过打印Text:的x位置进行双重检查

qml: x -0.576625
...
qml: x -71.4654609375

这是不对的。它看起来像个虫子。我以为也是，但后来我查看了文档：

如果NumberAnimation是在"过渡"或"行为"中定义的，则该值默认为"过渡"开始状态中定义的值，或触发"行为"时特性的当前值。

您没有使用Behavior，尽管语法看起来非常相似。再搜索一下就会发现on关键字的文档：

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

所以，这不是一个bug。您必须以某种方式为动画提供合理的from和to值。一种解决方案是对值进行硬编码：

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

不过，最好的解决方案可能不是依赖窗口的height来确定字体大小。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"
        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

您的代码只需稍作修改即可按预期工作。我没有使用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
            }
        }
    }
}