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

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

{{1}}

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

我不知道如何在点击按钮时让闪光工作，并且非常感谢有关如何完成此操作的任何帮助，谢谢。

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

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

1 个答案: