создавать анимацию, которая может работать с мышью

Question

Мне трудно создавать анимацию. Есть несколько прямоугольников, и я хотел бы сделать анимацию, чтобы два прямоугольника меняли свой цвет одновременно. Но я понятия не имею, как это сделать.

Я использовал последовательную анимацию, чтобы это произошло. Но это не сработало. Кроме того, я хотел бы, чтобы эта анимация происходила во многих боксах, я не знаю, как сделать это по порядку. Работать надо в разное время.

import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    id: idWindow
    visible: true
    width: 1200
    height: 800

    Rectangle{
        id: content
        anchors.fill: parent
        color: "#F0F0F0"
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0

        Column{
            id: list
            anchors.verticalCenterOffset: -78
            anchors.horizontalCenterOffset: -436
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10

            Rectangle {
                id: pf0
                width: 40
                height: 40
                radius: 0
                anchors.horizontalCenter: parent.horizontalCenter
                border.width: 1
                Text {
                    text: "pf-0"
                    anchors.centerIn: parent

                }
            }
// ......
        }

        Column {
            id: list1
            x: 4
            y: -3
            width: 199
            height: 241
            anchors.verticalCenterOffset: -106
            anchors.horizontalCenterOffset: -73
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10
            anchors.verticalCenter: parent.verticalCenter

            Rectangle {
                id: pa0
                width: 120
                height: 40
                radius: 0
                anchors.horizontalCenter: parent.horizontalCenter
                border.width: 1

                Text {
                    text: "page-A0"
                    anchors.centerIn: parent
                    anchors.horizontalCenterOffset: 3
                    anchors.verticalCenterOffset: 0
               }

            }

 // ......
        }

        Rectangle {
            id: rectangle
            x: 794
            y: 370
            width: 200
            height: 200
            color: "#5af751"

            MouseArea {
                anchors.fill: rectangle
                onPressed: playbanner.start()
            }

            SequentialAnimation {
                id: playbanner
                running: true 
                    ColorAnimation {
                        target: pa0
                        from: "white"
                        to: "black"
                        duration: 1000
                    } 

                    ColorAnimation {
                        target: pf0
                        from: "white"
                        to: "black"
                        duration: 1000
                    }
            }
        }
    }
}

Я ожидаю, что когда я нажму на прямоугольник, цвет должен измениться. Однако не сработало.

А также я хотел бы знать, когда есть еще коробки, как я могу сделать так, чтобы коробки меняли цвет по порядку.

Answer 1

• Прежде всего, если вы хотите создать анимацию, в которой цвет прямоугольников изменяется одновременно, вам следует использовать ParallelAnimation, а не SequentialAnimation.
• Вам необходимо удалить свойство running из ColorAnimation или установить для него значение false, поскольку анимация должна выполняться при нажатии на прямоугольник, поэтому если вы установите для параметра true значение true, то это произойдет, как только компонент получит загружен.
• Причина, по которой анимация не работает, заключается в том, что вы не установили свойство в цветной анимации.

Проверьте код ниже:

ParallelAnimation {
    id: playbanner         
    ColorAnimation {
        target: pa0
        from: "white"
        to: "black"
        duration: 1000
        property: "color"
    }
    ColorAnimation {
        target: pf0
        from: "white"
        to: "black"
        duration: 1000
        property: "color"
    }
}