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

这比做位置动画更轻松，而且在我看来它具有更“有机”的外观。

但如果您仍然坚持使用动画，您可以简单地让两个文本元素连续排列以假装环绕。但这将比以前的解决方案更重，因为它将涉及对子像素动画、两个文本元素以及隐藏“屏幕外”文本所必需的图形剪辑的更多重新评估:

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

两个并排的实现: