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

Question

我试图让我的板在单击按钮时闪烁绿色。

我添加了以下颜色动画代码来帮助创建闪烁效果，以便电路板可以从其原始颜色变为绿色，然后返回其原始颜色。

我在一些代码示例中看到ColorAnimation 也可以像ColorAnimation on color{...} 这样使用。我尝试使用它来引用 rectangle 颜色属性，但它抱怨 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;
            }
        }
    }
}