记录QML SequentialAnimation BUG及解决思路

基本代码如下，根据colorA来确定当前的动画效果，具体为一个呼吸灯，但是实际上hover到rectangle后，呼吸灯只会出现一次，第二次hover不会显示呼吸灯效果，running状态为true。

property color colorA 
property color colorB 

SequentialAnimation on colorA{
    running: mouseArea.containsMouse
    loops: Animation.Infinite

    ColorAnimation {
        from: colorA
        to: colorB
        duration: 500
    }

    ColorAnimation {
        from: colorB
        to: colorA
        duration: 500
    }
}

Rectangle {
        id: ring
        width: 140
        height: 140
        radius: width / 2
        border.color: mouseArea.containsMouse ? "red" : "grey"
        border.width: 2
        color: Colors.transparent
        anchors.centerIn: parent
        layer.enabled: mouseArea.containsMouse
        layer.effect: Glow {
            color: colorA
            transparentBorder: true
            samples: 35
            radius: 15
            spread: 0.6
            cached: true
        }
}

解决此bug的代码如下：

Rectangle {
        id: ring
        width: 140
        height: 140
        radius: width / 2
        border.color: mouseArea.containsMouse ? "red" : "grey"
        border.width: 2
        color: Colors.transparent
        anchors.centerIn: parent
        layer.enabled: mouseArea.containsMouse
        layer.effect: Glow {
            id: glow
            color: colorA
            transparentBorder: true
            samples: 35
            radius: 15
            spread: 0.6
            cached: true

            ColorAnimation on color {
                running: mouseArea.containsMouse
                id: ani1
                from: colorB
                to: colorA
                duration: 500
                onStopped: {
                    ani2.start()
                }
            }

            ColorAnimation on color {
                id: ani2
                from: colorA
                to: colorB
                duration: 500
                onStopped: {
                    ani1.start()
                }
            }
        }
}

具体的修改思路为，将animation从rectangle的外层，转移到Glow中去，手动控制animation的连续性。