qml文字滚动效果的封装,实现方式运用的qml中提供的动画效果,另一种实现方式也可以使用定时器修改控件的坐标来实现

//qml文字滚动效果控件封装

import QtQuick 2.0

Item {
    id:root
    width: 0
    height: 0
  //  color: "red"

    property int visibleZone
    property int srollingTime

    property int fontSize: 50
    property int fontLetterSpace :3
    property int fontWordSpace:5

    property string fontColor: "black"

    property string hText: ""

    property int htextWidth: 0

    property int topleftX:0
    property int topleftY:0

    property int sentenceMargin:5



       Text {
           id: txtFirst
           x:root.topleftX
           y:root.topleftY


           objectName: "txtFirst"
           font.pixelSize: fontSize
           font.letterSpacing: fontLetterSpace
           font.wordSpacing: fontWordSpace
           color: fontColor
           text: hText


           onWidthChanged: {
               animationFirstTxt.running = false
               htextWidth=txtFirst.width
               if (txtFirst.width > root.visibleZone)
               {
                   parent.width = root.visibleZone
                   anim.running=true
               }
               else
               {
                   root.width = txtFirst.width
                   anim.running=false
               }
           }
       }

       Text {
           id: txtSecond
           x:root.topleftX+root.htextWidth+root.sentenceMargin
           font.pixelSize: fontSize
           font.letterSpacing: fontLetterSpace
           font.wordSpacing: fontWordSpace
           color:fontColor
           text: hText
       }




       ParallelAnimation{
           id:anim
           running: false
           loops: Animation.Infinite
        //-----------------------------------------------
           SequentialAnimation {
               id:animationFirstTxt

               NumberAnimation{
                   target:txtFirst
                   property: "x"
                   to:-root.htextWidth-root.sentenceMargin+root.topleftX
                   duration: (root.htextWidth+root.sentenceMargin) / root.visibleZone * root.srollingTime
               }

               NumberAnimation{
                   target:txtFirst
                   property: "x"
                   to:root.topleftX+root.htextWidth+root.sentenceMargin
                   duration: 1
               }

               NumberAnimation{
                   target:txtFirst
                   property: "x"
                   to:root.topleftX
                   duration: (root.htextWidth+root.sentenceMargin) / root.visibleZone * root.srollingTime
               }
           }

       //------------------------------------------------------
           SequentialAnimation{
               id:animationSecondTxt

               NumberAnimation{
                   target:txtSecond
                   property: "x"
                   to:root.topleftX
                   duration: (root.htextWidth+root.sentenceMargin) / root.visibleZone * root.srollingTime

               }

               NumberAnimation{
                   target:txtSecond
                   property: "x"
                   to: -root.htextWidth-root.sentenceMargin+root.topleftX
                   duration: (root.htextWidth+root.sentenceMargin) / root.visibleZone * root.srollingTime
               }

               NumberAnimation{
                   target:txtSecond
                   property: "x"
                   to:root.topleftX+root.htextWidth+root.sentenceMargin
                   duration: 1
               }

           }

       }

}

猜你喜欢

转载自my.oschina.net/urlove/blog/1806565