QML-动画-移动字符串

//在这里新建一个QML文件，文件名为MoveableText.qml

Item {

id: wrapper

width: 120; height: text.paintedHeight

clip: true

property alias text: text.text

property int fontSize: 24

property int duration: 2000

property alias color: text.color

property alias font: text.font

property bool marqueeEnable: true

property real targetLeftMost: wrapper.width - text.paintedWidth

property alias xpos: text.x

property int delayScroll: 0

property bool reset: false // add this for reset the text location 

Text {

 id: text

 x: 0

 anchors.verticalCenter: parent.verticalCenter

 font.pixelSize: wrapper.fontSize

 clip: true

 // add this for reset the text location 

 SequentialAnimation on x {

 running: wrapper.reset

 loops: 1

 NumberAnimation { to: 0; duration: 0 }

 }

 SequentialAnimation on x {

 running: wrapper.marqueeEnable && (text.paintedWidth > wrapper.width)

 loops: Animation.Infinite 

 PauseAnimation { duration: delayScroll }

 NumberAnimation { to: wrapper.targetLeftMost; duration: wrapper.duration }

 PauseAnimation { duration: 500 }

 NumberAnimation { to: 0; duration: 0 }

 PauseAnimation { duration: 500 }

 }

}

}

// test code

Item { 

width: 360 

height: 360 

focus:true 

property int flag: 0 

MarqueeText { 

 anchors.centerIn: parent 

 text: "Hello World......" 

 NumberAnimation on x { to: 50; duration: 1000 } 

 marqueeEnable:(flag == 0) ? true : false; 

 reset:(marqueeEnable == true) ? false : true; 

} 

MouseArea { 

 anchors.fill: parent 

 onClicked: { 

 if (flag == 1) 

 { 

 flag = 0; 

 } 

 else 

 { 

 flag = 1; 

 } 

 } 

} 

}