单击按钮后动画 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 中使用它时你会失去 link 到属性在这种情况下你可以只使用 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;
            }
        }
    }
}

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

Animating the color of QML rectangles after a button is clicked

c++

qt

qml