QML continuouse无限移动文本

Question

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

已经有一个问题QML Moving text with timer，但我的问题是不同的。

例：

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

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

这两个实现并排：