单击按钮后动画QML矩形的颜色

Question

当点击一个按钮时,我试图让我的电路板闪烁绿色.

我添加了以下颜色动画代码以帮助创建闪烁效果,以便电路板可以从原始颜色变为绿色,并返回到原始颜色.

我在一些代码示例中看到过,ColorAnimation也可以像这样使用ColorAnimation on color{...}.我尝试使用它来引用rectanglecolor属性,但它抱怨color是一个无效的属性,这就是为什么我在下面的代码中没有它.

SequentialAnimation
        {
            running: true
            loops: Animation.Infinite

            ColorAnimation
            {
                to: "green"
                duration: 500
            }

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

上面的代码片段已进入下面的转发器代码.下面的代码处理显示我的电路板与我开始的黑色和白色的颜色.

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
            }
        }
    }
}

但是,每当我点击应该触发绿色闪光的按钮时,它都不会闪烁.

我不知道如何点击按钮时闪烁工作,并非常感谢有关如何完成此任务的任何帮助,谢谢.

Answer 1

您需要声明动画属性,因为color属性不仅可以color,例如background等.

通常它必须是:

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

但是当你在里面使用它时SequentialAnimation你会丢失属性链接,在这种情况下你可以使用它,PropertyAnimation因为ColorAnimation它的特殊情况:

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;
            }
        }
    }
}