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。
您需要从ColorAnimation中删除running属性或将其设置为false，因为您需要在单击矩形时发生动画，因此，如果将running设置为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"
    }
}

制作可以用鼠标操作的动画

1 个答案: