android 闪亮动画 闪烁动画怎么做_qt5


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

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

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