QML实现呼吸动画

版权声明：本文系作者原创。未经许可，不得转载。

    
import QtQuick 2.0
Rectangle {
    id: area
    width: 350
    height: 350
    color: "green"
    Timer {
        id: areaTimer
        property bool stateFlag: true
        interval: 1000; running: true; repeat: true
        onTriggered:  {
            console.log("areaTimer trigger")
            if(stateFlag) {
                area.state = "end";
            } else {
                area.state = "begin";
            }
            stateFlag = !stateFlag;
        }
    }
    Image {
        id: img
        width: parent.width
        height: width
        source: "power_twinkle.png"
    }
    state: "begin"
    states: [
        State {
            name: "begin"
            PropertyChanges { target: img; opacity: 1.0 }
        },
        State {
            name: "end"
            PropertyChanges { target: img; opacity: 0.0 }
        }
    ]
    transitions: [
        Transition {
            from: "begin"; to: "end"
            PropertyAnimation {target: img; properties: "opacity"; duration: 1000}
        },
        Transition {
            from: "end"; to: "begin"
            PropertyAnimation {target: img; properties: "opacity"; duration: 1000}
        }
    ]
}