相信不少人都用过酷狗音乐这个软件，里面的音乐播放控制条上的小圆点在音乐播放的时候是可以一闪一闪地发光的。其实这个效果用QML实现起来并不复杂。

在之前的文章中我就有介绍过使用RectangularGlow作窗口阴影效果，这个效果也可以用于发光。

RectangularGlow {
    anchors.fill: parent
    glowRadius: 0
    spread: 0
    color: parent.color
    cornerRadius: parent.radius
}

color与要发光的部件的一样，这样效果比较好。cornerRadius与部件一样可以在glowRadius为0时部件显示原本的形状。

要产生发光效果就要先确定发光时glowRadius的值，经过我的测试，glowRadius的值为部件的直径时效果良好。也可以自己尝试，选择自己感觉效果比较好的来使用。

从原始状态到发光是一个动画效果，闪烁效果是不断地“原始——发光——原始”的过程，可以用QML中顺序动画来实现不断循环的过程。

SequentialAnimation on glowRadius {
	loops: Animation.Infinite
	alwaysRunToEnd: true

	PropertyAnimation{
		to: 10
		duration: 1700
	}
	PropertyAnimation{
		to: 0
		duration: 1700
	}
}

SequentailAnimation是顺序动画，其中的动画是按照生明的顺序，有序执行的。duration是动画闪烁的快慢，建议设为一样的值。 alwaysRunToEnd的作用显而易见，就是在手动调用stop()或running属性为false是，是否将动画执行完后再停止。

loops影响动画循环执行次数。

添加上面代码后，小圆点就会开始不断地闪烁了。

将通用性代码做成组件可以更方便地使用，下面是完整的代码：

//AnimationGlowDot.qml
import QtQuick 2.0
import QtGraphicalEffects 1.0
Rectangle {
    width: 5
    height: width
    radius: 3
    color: "white"
    property alias running: lop.running

    RectangularGlow {
        anchors.fill: parent
        glowRadius: 0
        spread: 0
        color: parent.color
        cornerRadius: parent.radius

        SequentialAnimation on glowRadius {
            id: lop
            loops: Animation.Infinite
            alwaysRunToEnd: true

            PropertyAnimation{
                to: 10
                duration: 1700
            }
            PropertyAnimation{
                to: 0
                duration: 1700
            }
        }
    }
}