技術標籤：QT/QMLqmlqt5

字型閃爍主要通過動畫來實現，控制字型的透明度，達到閃爍的效果。

1、SequentialAnimation 介紹

SequentialAnimation和 ParallelAnimation 都是多動畫的實現方式，SequentialAnimation是一種序列的動畫，動畫按順序執行，而ParallelAnimation是並行動畫，所有的動畫同時執行。對於動畫文字則是採用SequentialAnimation將多個透明度的變化動畫串聯實現。下面介紹SequentialAnimation的相關引數和使用方法。

runing：執行狀態，true代表執行，false
 
代表停止狀態
loops：播放次數，1代表迴圈播放一次，Animation.Infinite代表無限迴圈播放
start(): 啟動動畫播放
stop(): 停止動畫播放

使用方法如下：

  import QtQuick 2.0

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"
      SequentialAnimation {
          running: true // 預設為true，代表初始化完成後動畫自動播放
          NumberAnimation {
 
 target: rect; property: "x"; to: 50; duration: 1000 } // 動畫1，將x移動到50的位置，持續時間為1s
          NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 } // 動畫2，將y移動到50的位置，持續時間為1s
      }
  }

上述程式碼，動畫1和動畫2作為SequentialAnimation的元素，在播放過程中，會先播放動畫1，動畫1完成後再播放動畫2，實際的效果為，紅色矩形框從（0，0）位置再1s內慢慢向右移動到（50，0）的位置，然後從（50，0）的位置在1s內慢慢向下移動到（50，50）的位置。

2、字型閃爍實現

瞭解了SequentialAnimation的使用方法，下面介紹如何實現字型閃爍。字型的實現程式碼如下：

     Rectangle{
        id:background
        anchors.fill: parent
        color: "transparent"
        Text {
            id: stringInfo
            text: textName
            color: repeatFlag ? fontColor : fontDefaultColor
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.bold: true
            font.pixelSize: 30
        }
    }

字型的預設透明度"opacity"預設為1，所以，構造第一個動畫，將透明度從1變到0.2，持續時間為2000ms，程式碼如下：

	NumberAnimation {
	    target: stringInfo
	    property: "opacity"
	    duration: 2000
	    to: 0.2
	    easing.type: Easing.InOutQuad
	}

動畫1完成後，接下來實現動畫2，當前的字型透明度為0.2，所以動畫2將透明度從0.2設定到1，from預設為0.2，因此無需寫入程式碼。

	NumberAnimation {
	    target: stringInfo
	    property: "opacity"
	    duration: 2000
	    to: 1
	    easing.type: Easing.InOutQuad
	}

通過SequentialAnimation將兩個動畫合起來，並且設定為無限迴圈播放

	SequentialAnimation {
        id: seqanimation
        running: false
        loops:Animation.Infinite
        NumberAnimation {
            target: stringInfo  //字型物件的id
            property: "opacity"  // 變數為透明度
            duration: 2000
            to: 0.2
            easing.type: Easing.InOutQuad
        }

        NumberAnimation {
            target: stringInfo
            property: "opacity"
            duration: 2000
            to: 1.0
            easing.type: Easing.InOutQuad
        }
    }

呼叫方式如下：

/* 啟動動畫 */
seqanimation.start();

/* 停止動畫 */
seqanimation.stop();
stringInfo.opacity = 1; // 停止動畫的時候，將字型的預設透明度設定為1，因為動畫停止時的透明度可以是任意值，為了防止字型顏色正常，所以做此操作。

大家可以根據上面的方法來動手試一試吧。