本文共 2526 字，大约阅读时间需要 8 分钟。

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

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

转载地址：http://jxuun.baihongyu.com/