import QtQuick 2.6
import QtGraphicalEffects 1.0

/*
 * 作者: yubo
 * 功能: CollideAuto
 * 描述: 提供一個公共呼叫碰撞動畫控制元件
 * 日期: 2018-08-09
 */

Item {
    id: collide
    property int dutationTime: 2000 //時間週期
    property int warningLevel: 0  //報警等級
    property real hueImage: 0.12 //色調
    property real saturationImage: 1 //飽和度
    property real lightnessImage: 0 //亮度

    width: 160
    height: 160
    scale: 1
    Image {
        id: collide1
        opacity: 0.8
        source: "qrc:/Image/Common/Alarm/Collide/collide1.png"
        Colorize {
            anchors.fill: collide1
            source: collide1
            hue: warningLevel === 1 ? hueImage : 0
            saturation: saturationImage
            lightness: lightnessImage
            Behavior on hue { NumberAnimation { duration: 500 } }
        }
        ParallelAnimation {
            running: true
            alwaysRunToEnd: true
            NumberAnimation { target: collide1; property: "rotation"; from: 360; to: 0; duration: dutationTime }
            loops: Animation.Infinite
        }
    }
    Image {
        id: collide2
        x: 29
        y: 29
        opacity: 0.3
        source: "qrc:/Image/Common/Alarm/Collide/collide2.png"
        Colorize {
            anchors.fill: collide2
            source: collide2
            hue: warningLevel === 1 ? hueImage : 0
            saturation: saturationImage
            lightness: lightnessImage
            Behavior on hue { NumberAnimation { duration: 500 } }
        }
        ParallelAnimation {
            running: true
            alwaysRunToEnd: true
            NumberAnimation { target: collide2; property: "rotation"; from: 0; to: 360; duration: dutationTime }
            loops: Animation.Infinite
        }
    }
    Image {
        id: collide3
        x: 25
        y: 25
        opacity: 0.8
        source: "qrc:/Image/Common/Alarm/Collide/collide3.png"
        Colorize {
            anchors.fill: collide3
            source: collide3
            hue: warningLevel === 1 ? hueImage : 0
            saturation: saturationImage
            lightness: lightnessImage
            Behavior on hue { NumberAnimation { duration: 500 } }
        }
        ParallelAnimation {
            running: true
            alwaysRunToEnd: true
            NumberAnimation { target: collide3; property: "rotation"; from: 360; to: 0; duration: dutationTime }
            loops: Animation.Infinite
        }
    }
    Image {
        id: collide4
        x: 8
        y: 8
        opacity: 0.8
        source: "qrc:/Image/Common/Alarm/Collide/collide4.png"
        Colorize {
            anchors.fill: collide4
            source: collide4
            hue: warningLevel === 1 ? hueImage : 0
            saturation: saturationImage
            lightness: lightnessImage
            Behavior on hue { NumberAnimation { duration: 500 } }
        }
        ParallelAnimation {
            running: true
            alwaysRunToEnd: true
            NumberAnimation { target: collide4; property: "rotation"; from: 0; to: 360; duration: dutationTime }
            loops: Animation.Infinite
        }
    }
}

圖片資源：

collide1.png 

collide2.png 

collide3.png 

collide4.png