QML 连续无限移动文本

Question

我需要实现无限移动的文本，但在它环绕之前，最后应该显示相同的文本。

已经有一个解决的问题QML 移动文本与计时器，但我的问题是不同的。

例子：

我的文字是“一些文字”，我想要这样的动画

Frame    I need this     Regular NumberAnimation
0        |some text |    |some text |
10       |ome text  |    |ome text  |
20       |me text   |    |me text   |
30       |e text   s|    |e text    |
40       | text   so|    | text     |
50       |text   som|    |text      |
60       |ext   some|    |ext       |
70       |xt   some |    |xt        |
80       |t   some t|    |t         |
90       |   some te|    |          |
100      |  some tex|    |         s|
110      | some text|    |        so|
120      |some text |    |       som|
130      |ome text  |    |      some|
140      |me text   |    |     some |
150      |e text   s|    |    some t|
160      | text   so|    |   some te|
170      |text   som|    |  some tex|
180      |ext   some|    | some text|
190      |xt   some |    |some text |
200      |t   some t|    |ome text  |

有没有一种简单的方法可以在 QML 中做到这一点？

Answer 1

您可以在没有任何动画的情况下完成此操作，只需通过在特定步骤剪切源字符串来组成显示字符串：

  Item {
    property string text: "some text"
    property string spacing: "      "
    property string combined: text + spacing
    property string display: combined.substring(step) + combined.substring(0, step)
    property int step: 0

    Timer {
      interval: 200
      running: true
      repeat: true
      onTriggered: parent.step = (parent.step + 1) % parent.combined.length
    }

    Text {
      text: parent.display
    }
  }

这比做位置动画要轻，而​​且它具有更“有机”的外观 IMO。

但如果你仍然坚持动画，你可以简单地将两个文本元素排成一行来假换行。但这将比以前的解决方案更重，因为它将涉及对子像素动画、两个文本元素以及隐藏“屏幕外”文本所需的图形剪辑的更多重新评估：

  Item {
    id: root
    property alias text: t1.text
    property int spacing: 30
    width: t1.width + spacing
    height: t1.height
    clip: true

    Text {
      id: t1
      text: "some text"
      NumberAnimation on x { running: true; from: 0; to: -root.width; duration: 3000; loops: Animation.Infinite }

      Text {
        x: root.width
        text: t1.text
      }
    }
  }

并排的两个实现：