Animating the color of QML rectangles after a button is clicked

Question

I am trying to get my board to flash green when a button is clicked.

I have added the following color animation code to help create the flashing effect, so that the board can go from its original colors, to green, and back to it's original colors.

I have seen in some code examples where ColorAnimation can also be used like this ColorAnimation on color{...}. I tried using this to reference the rectangle color property but it complains about color being an invalid property, which is why i don't have it in the code below.

SequentialAnimation
        {
            running: true
            loops: Animation.Infinite

            ColorAnimation
            {
                to: "green"
                duration: 500
            }

            ColorAnimation
            {
                to: "transparent"
                duration: 500
            }
        }

The code fragment above has gone into the repeater code below. The code below handles displaying my board with the black and white colors I am starting off with.

Repeater
{
    id: board
    model: 64

    Rectangle
    {
        color: getWhiteOrBlack(index)

        opacity: 0.45
        width: getSquareSize()
        height: getSquareSize()

        x: getX(index)
        y: getY(index)

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                pawn.x = parent.x
                pawn.y = parent.y

                if (starting_position == false)
                {
                    starting.x = parent.x
                    starting.y = parent.y
                    starting_position = true
                    starting_index = index

                    ending.visible = false
                }
                else
                {
                    ending.visible = true
                    ending.x = parent.x
                    ending.y = parent.y
                    ending_index = index

                    Board.move(getRow(starting_index), getColumn(starting_index), getRow(ending_index), getColumn(ending_index))

                    starting_position = false
                }
            }
        }

        SequentialAnimation
        {
            running: true
            loops: Animation.Infinite

            ColorAnimation
            {
                to: "green"
                duration: 500
            }

            ColorAnimation
            {
                to: "transparent"
                duration: 500
            }
        }
    }
}

However, whenever I click on the button that is supposed to trigger the green flash, it doesn't flash.

I don't know how to get the flashing to work when a button is clicked and would greatly appreciate any help on how to accomplish this, thanks.

Answer 1

You need to declare the animated property since color property can be not only color but, for example background etc.

So usual it have to be :

Rectangle {
    color: "green"
    ColorAnimation on color {
        to: "red"
        duration: 1000
    }
} 

But when you use it in inside SequentialAnimation you lose link to property and in this case you can just use PropertyAnimation since ColorAnimation is particular case of it:

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: screen
    width: 400
    height: 300
    visible: true

    Rectangle {
        id: light
        width: 50
        height: 50
        radius: 25
        color: "green"
        anchors.centerIn: parent

        SequentialAnimation {
            id: anim
            PropertyAnimation {
                target: light
                property: "color"
                to: "red"
                duration: 1000

            }
            PropertyAnimation {
                target: light
                property: "color"
                to: "green"
                duration: 1000

            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                anim.running = true;
            }
        }
    }
}