// 06-animation/animation.qml
// Animations: implicit (Behavior) and explicit (NumberAnimation, SequentialAnimation).
// Pure QML. Run with: qml6 animation.qml

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    width: 480; height: 320
    visible: true
    title: "QML 06: Animations"
    color: "#fafafa"

    // ---- Implicit animation via Behavior ----
    Rectangle {
        id: implicitBox
        x: 20; y: 20
        width: 60; height: 60
        radius: 8
        color: "tomato"

        Behavior on x {
            NumberAnimation { duration: 400; easing.type: Easing.InOutQuad }
        }
        Behavior on y {
            NumberAnimation { duration: 400; easing.type: Easing.InOutQuad }
        }
        Behavior on color {
            ColorAnimation { duration: 400 }
        }

        MouseArea {
            anchors.fill: parent
            drag.target: parent
            drag.axis: Drag.XAndYAxis
            onPressed: parent.color = "steelblue"
            onReleased: parent.color = "tomato"
        }
    }

    Text {
        x: 100; y: 32
        text: "Drag the red box: implicit Behavior animates x, y, color"
        color: "#666"
    }

    // ---- Explicit animation ----
    Rectangle {
        id: explicitBox
        x: 20; y: 120
        width: 60; height: 60
        radius: 30
        color: "mediumseagreen"

        SequentialAnimation on y {
            loops: Animation.Infinite
            running: true
            NumberAnimation { from: 120; to: 240; duration: 800; easing.type: Easing.OutBounce }
            PauseAnimation { duration: 400 }
            NumberAnimation { from: 240; to: 120; duration: 600; easing.type: Easing.InQuad }
        }
    }

    Text {
        x: 100; y: 132
        text: "Bouncing ball: explicit SequentialAnimation, infinite loop"
        color: "#666"
    }

    // ---- Triggered animation ----
    Rectangle {
        id: pulseBox
        x: 20; y: 240
        width: 40; height: 40
        radius: 4
        color: "goldenrod"
    }

    Text {
        x: 100; y: 252
        text: "Click the gold box to pulse"
        color: "#666"
    }

    Button {
        x: 280; y: 246
        text: "Pulse!"
        onClicked: pulseAnimation.start()
    }

    SequentialAnimation {
        id: pulseAnimation
        ParallelAnimation {
            NumberAnimation { target: pulseBox; property: "scale"; from: 1.0; to: 1.4; duration: 200 }
            ColorAnimation { target: pulseBox; property: "color"; to: "tomato"; duration: 200 }
        }
        NumberAnimation { target: pulseBox; property: "scale"; from: 1.4; to: 1.0; duration: 200 }
        ColorAnimation { target: pulseBox; property: "color"; to: "goldenrod"; duration: 200 }
    }
}