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

这比做位置动画要轻，而且它有更多的有机＆＃34;看IMO。

但是如果你仍然坚持动画，你可以简单地连续两个文本元素来假装包装。但这将比以前的解决方案更重，因为它将涉及更多的子像素动画重新评估，两个文本元素以及隐藏屏幕外的图形剪辑＆＃34;文本：

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

两个实现并排：

QML continuouse无限移动文本

1 个答案: