QML SequentialAnimation实现闪烁文字动画

字体闪烁主要通过动画来实现，控制字体的透明度，达到闪烁的效果。

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，因为动画停止时的透明度可以是任意值，为了防止字体颜色正常，所以做此操作。

大家可以根据上面的方法来动手试一试吧。