import/qml/MarqueeText.qml

0001 import QtQuick 2.15
0002 import QtQuick.Controls 2.15
0003
0004 Item {
0005     id: control
0006     property alias color: marqueeText.color
0007     property alias text: rtlDetector.text
0008     property alias font: marqueeText.font
0009     property alias minimumPointSize: marqueeText.minimumPointSize
0010     property alias minimumPixelSize: marqueeText.minimumPixelSize
0011     property alias fontSizeMode: marqueeText.fontSizeMode
0012     property alias verticalAlignment: marqueeText.verticalAlignment
0013     property alias paintedWidth: marqueeText.paintedWidth
0014     property int speed: 4000
0015     property int delay: 4000
0016     property var marqueeWidth: width
0017     property bool rightToLeft: false
0018     property int distance: marqueeWidth / 2
0019
0020     onWidthChanged: {
0021         marqueeWidth = width
0022         reset()
0023     }
0024
0025     function reset() {
0026         if(marqueeAnimator.running) {
0027             marqueeAnimator.stop()
0028             marqueeText.width = control.marqueeWidth
0029             marqueeText.x = control.x
0030             coverText.width = marqueeText.width
0031             coverText.x = marqueeText.width
0032             marqueeAnimator.start()
0033         } else {
0034             marqueeAnimator.start()
0035         }
0036         marqueeAnimator.start()
0037         marqueeText.enabled = false
0038         marqueeText.enabled = true
0039     }
0040
0041     Text {
0042         id: rtlDetector
0043         visible: false
0044         width: parent.width
0045
0046         onHorizontalAlignmentChanged: {
0047             if(rtlDetector.horizontalAlignment == Text.AlignRight) {
0048                 leftToRight = true;
0049             }
0050         }
0051     }
0052
0053     Text {
0054         id: marqueeText;
0055         horizontalAlignment: Text.AlignHLeft
0056         verticalAlignment: Text.AlignVCenter
0057         height: parent.height
0058         width: parent.width
0059         elide: Text.ElideNone
0060         text: rtlDetector.text
0061         visible: x < parent.width ? 1 : 0
0062     }
0063
0064     Text {
0065         id: coverText;
0066         horizontalAlignment: marqueeText.horizontalAlignment
0067         verticalAlignment: marqueeText.verticalAlignment
0068         height: marqueeText.height
0069         width: marqueeText.width
0070         elide: marqueeText.elide
0071         x: marqueeText.x - marqueeText.width
0072         font: marqueeText.font
0073         color: marqueeText.color
0074         text: marqueeText.text
0075         minimumPointSize: marqueeText.minimumPointSize
0076         minimumPixelSize: marqueeText.minimumPixelSize
0077         fontSizeMode: marqueeText.fontSizeMode
0078         opacity: 0
0079     }
0080
0081     SequentialAnimation {
0082         id: marqueeAnimator
0083         loops: Animation.Infinite
0084         running: false
0085
0086         PropertyAnimation {
0087             id: marqueeAnimatorDelayAnimator
0088             target: marqueeText
0089             property: "opacity"
0090             from: 1
0091             to: 1
0092             duration: control.delay
0093         }
0094
0095         ScriptAction {
0096             script: coverText.opacity = 1
0097         }
0098
0099         ParallelAnimation {
0100             PropertyAnimation {
0101                 target: marqueeText
0102                 property: "x"
0103                 from: 0
0104                 to: !rightToLeft ? (control.x + marqueeText.paintedWidth) + distance : (control.x - marqueeText.paintedWidth) - distance
0105                 duration: speed
0106             }
0107
0108             PropertyAnimation {
0109                 target: coverText
0110                 property: "x"
0111                 from: !rightToLeft ? (control.x - marqueeText.paintedWidth) - distance  : (control.x + marqueeText.paintedWidth) + distance
0112                 to: marqueeText.x
0113                 duration: speed
0114             }
0115         }
0116     }
0117 }