Adding scrolling text animation demo.
authorsl
Mon, 02 Jun 2014 17:40:32 +0200
changeset 26bb3f9b3c6416
parent 25 aec049087578
child 27 3d3f781bf543
Adding scrolling text animation demo.
MarqueeText.qml
TestsTab.qml
     1.1 --- a/MarqueeText.qml	Mon Jun 02 14:07:25 2014 +0200
     1.2 +++ b/MarqueeText.qml	Mon Jun 02 17:40:32 2014 +0200
     1.3 @@ -4,22 +4,76 @@
     1.4      id:marqueeText
     1.5      height: scrollingText.height
     1.6      clip: true
     1.7 -    property int tempX: 0
     1.8 +    property int pixelsPerSeconds:25
     1.9      property alias text: scrollingText.text
    1.10 +    property alias separator: separatorText.text
    1.11 +
    1.12      Text {
    1.13 -        x: tempX
    1.14          id:scrollingText
    1.15      }
    1.16  
    1.17 +    Text {
    1.18 +        id:separatorText
    1.19 +        text:" || "
    1.20 +        x:scrollingText.x+scrollingText.width
    1.21 +    }
    1.22 +
    1.23 +    Text {
    1.24 +        id:followingText
    1.25 +        text:scrollingText.text
    1.26 +        x:scrollingText.x+scrollingText.width+separatorText.width
    1.27 +    }
    1.28 +
    1.29 +    ParallelAnimation {
    1.30 +        id: animation
    1.31 +        loops: Animation.Infinite;
    1.32 +        //Reset to zero and restart onStopped so that we keep looping
    1.33 +        //onStopped: {scrollingText.x=0;running=true;}
    1.34 +
    1.35 +        XAnimator {
    1.36 +            target: scrollingText;
    1.37 +            //from: 0;
    1.38 +            to: -scrollingText.width-separatorText.width;
    1.39 +            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
    1.40 +        }
    1.41 +
    1.42 +        XAnimator {
    1.43 +            target: separatorText;
    1.44 +            from: separatorText.x;
    1.45 +            to: separatorText.x-scrollingText.width-separatorText.width;
    1.46 +            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
    1.47 +        }
    1.48 +
    1.49 +        XAnimator {
    1.50 +            target: followingText;
    1.51 +            from: followingText.x;
    1.52 +            to: followingText.x-scrollingText.width-separatorText.width;
    1.53 +            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
    1.54 +        }
    1.55 +
    1.56 +    }
    1.57 +
    1.58 +
    1.59 +
    1.60 +
    1.61 +
    1.62      MouseArea {
    1.63          id:mouseArea
    1.64          anchors.fill: parent
    1.65          onClicked: {
    1.66 -            tempX = 0;
    1.67 -            timer.running = true;
    1.68 +            animation.running=true;
    1.69 +            //animator.running=true;
    1.70 +            //otherAnimator.running=true;
    1.71 +            //scrollingText.x=-500;
    1.72 +
    1.73 +            //tempX = 0;
    1.74 +            //timer.running = true;
    1.75          }
    1.76 +
    1.77      }
    1.78  
    1.79 +
    1.80 +    /*
    1.81      Timer {
    1.82          id:timer
    1.83          interval: 33; running: false; repeat: true
    1.84 @@ -41,4 +95,5 @@
    1.85              scrollingText.x = 0
    1.86          }
    1.87      }
    1.88 +    */
    1.89  }
     2.1 --- a/TestsTab.qml	Mon Jun 02 14:07:25 2014 +0200
     2.2 +++ b/TestsTab.qml	Mon Jun 02 17:40:32 2014 +0200
     2.3 @@ -248,21 +248,24 @@
     2.4  
     2.5          //
     2.6          Rectangle {
     2.7 -                border.width: 2
     2.8 -                border.color: "black"
     2.9 -                color: "lightsteelblue"
    2.10 +            border.width: 2
    2.11 +            border.color: "black"
    2.12 +            color: "lightsteelblue"
    2.13 +            anchors.horizontalCenter: parent.horizontalCenter
    2.14 +            width: 250
    2.15 +            height: text.height + 10
    2.16 +            y:100
    2.17 +            MarqueeText {
    2.18 +                id:text
    2.19 +                width: 200
    2.20 +                pixelsPerSeconds:50
    2.21 +                anchors.verticalCenter: parent.verticalCenter
    2.22                  anchors.horizontalCenter: parent.horizontalCenter
    2.23 -                width: 250
    2.24 -                height: text.height + 10
    2.25 -                y:100
    2.26 -                MarqueeText {
    2.27 -                    id:text
    2.28 -                    width: 200
    2.29 -                    anchors.verticalCenter: parent.verticalCenter
    2.30 -                    anchors.horizontalCenter: parent.horizontalCenter
    2.31 -                    text: "start ------ abcdefghijklmnopqrtaksdjfkdfjklsdjflksdjfklsjadfkljsad;flasjdlfjasdfjldsdfljf---- end"
    2.32 -                }
    2.33 +                text: "start ------ abcdefghijklmnopqrtaksdjfkdfjklsdjflksdjfklsjadfkljsad;flasjdlfjasdfjldsdfljf---- end"
    2.34 +                //text: "start ------ end"
    2.35 +                separator: " | "
    2.36              }
    2.37 +        }
    2.38  
    2.39      }
    2.40  }