How to stop() Color Animation?

JasmineSethi

Following my code snippet:

import QtQuick 2.9
import QtQuick.Window 2.3

Window
{
id:root
visible: true
width: 500
height: 300
color:"red"

//to stop
Rectangle
{
    id: r1
    height: 100
    width: 100
    color: "green"

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            t1.running=false
            t1.stop()
        }

    }
}

//to start
Rectangle
{
    id: r2
    height: 100
    width: 100
    color: "black"
    anchors.top: r1.bottom

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            t1.running=true
            t1.start()
        }

    }
}

ColorAnimation on color { id:a; to: "yellow"; duration: 1000; onStopped: b.start(); running: false }
ColorAnimation on color { id:b; to: "green"; duration: 1000; onStopped: a.start();running: false }


Timer
{
    id: t1
    running: false
    onTriggered:
        a.start()
}

}

I want to stop the animation but using stop(), i am unable to stop the animation?
I want to show blink of two colors and when stop is pressed it should stop and when start is pressed it should start.
Can anyone suggest any idea?

dheerendra

When you run this what is happening ? Is the timer really starting ? You are specifying just one second time for Animation. Just blink of an eye, your animation is complete. Can you debug the app by placing console.log and see what is happening ? Logs will help you to see what happening everywhere. Your issue is actually starting from timer & short animation interval.

mranger90

The problem is in your animation. Every time one stops, the other will start, and you are depending on the timer state, which is incorrect. You need to depend on some other state variable.
Here is a modified version:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:root
    visible: true
    width: 500
    height: 300
    color:"red"
    property bool colorRun;
    colorRun: true

    //to stop
    Rectangle
    {
        id: r1
        height: 100
        width: 100
        color: "green"


        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log("Green area clicked");
                t1.running = false
                t1.stop()
                a.stop()
                b.stop()
                colorRun = false;
            }

        }
    }

    //to start
    Rectangle
    {
        id: r2
        height: 100
        width: 100
        color: "black"
        anchors.top: r1.bottom


        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                t1.running = true
                t1.start()
            }

        }
    }

    ColorAnimation on color { id:a; to: "yellow"; duration: 1000; onStopped: colorRun ? b.start() : b.stop(); running: false }
    ColorAnimation on color { id:b; to: "green"; duration: 1000; onStopped: colorRun ? a.start() : a.stop(); running: false }


    Timer
    {
        id: t1
        running: false
        onTriggered: {
            console.log("Timer Trigger fired");
            a.start()
            colorRun = true
        }
    }
}

JasmineSethi

@mranger90 Thank u very much. Problem solved