import QtQuick 2.15
import QtQuick.Timeline 1.0

Rectangle {
    id: root
    width: 480
    height: 272

    color: "#ffffff"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Timeline {
        id: timeline
        animations: [
            TimelineAnimation {
                id: timelineAnimation
                running: true
                duration: 1000
                loops: 1
                to: 1000
                from: 0
                onFinished: console.log("finished")
            }
        ]
        endFrame: 1000
        startFrame: 0
        enabled: true

        KeyframeGroup {
            target: root
            property: "color"
            Keyframe {
                value: "#ffffff"
                frame: 0
            }

            Keyframe {
                value: "#ff0000"
                frame: 1000
            }
        }
    }
    states: [
        State {
            name: "State1"
            when: mouseArea.pressed


            PropertyChanges {
                target: timelineAnimation
                running: true
            }
        },
        State {
            name: "State2"
            when: !mouseArea.pressed

            PropertyChanges {
                target: timelineAnimation
                running: false
            }
        }
    ]
}