Solved How to make a scrollable text
-
Goodmorning,
I'm trying to make a scrollable text that enters inside a rectangle from the left and then goes out from the right, like the gif below.
https://media.giphy.com/media/qoDDQhekkyVe8/100.webpSo far I've wrote the code below searching in the net, but I don't know how to make it "enter" and "go out" from a rectangle.
import QtQuick 2.3 Item { property int clipRegion property string testo property color colore property int sfas: 0 Rectangle { height: parent.height width: clipRegion color: "green" } Text{ id : text color: colore text: testo width: clipRegion NumberAnimation { alwaysRunToEnd: true id: numberAnimation targets: text from: clipRegion to: 0 duration: 5000 property: "x" Component.onCompleted: {running = true;} onRunningChanged: if (!running) { running=true; } } } }
Any help would be highly appreciate.
Thank you in advanced. -
Hi @davidino
A quick and dirty way to do it purely with QML is as follows (animation starts when you click the text)
Rectangle { id: scrollingText width: 200 height: 20 clip: true color: "yellow" property string text: "This is a scrolling text!" property int duration: 2000 Text { id: text1 verticalAlignment: Text.AlignVCenter text: scrollingText.text x: 0 } Text { id: text2 verticalAlignment: Text.AlignVCenter text: scrollingText.text x: scrollingText.width } SequentialAnimation { id: animation loops: Animation.Infinite ParallelAnimation { PropertyAnimation {target: text1; property: "x"; to: -scrollingText.width; duration: scrollingText.duration} PropertyAnimation {target: text2; property: "x"; to: 0; duration: scrollingText.duration} } PropertyAnimation {target: text1; property: "x"; to: scrollingText.width; duration: 0} ParallelAnimation { PropertyAnimation {target: text1; property: "x"; to: 0; duration: scrollingText.duration} PropertyAnimation {target: text2; property: "x"; to: -scrollingText.width; duration: scrollingText.duration} } PropertyAnimation {target: text2; property: "x"; to: scrollingText.width; duration: 0} } MouseArea { anchors.fill: parent onClicked: { animation.running = true } } }
Maybe someone else will come with something better.
Cheers. -
Hello @Diracsbracket ,
that's brilliant. I'd never have thought about it.
THank you very much.