Как разбить прямоугольник на 2 равные части, используя анимацию QML?

Question

Сценарий : прямоугольник перемещается в горизонтальном направлении с некоторой скоростью, и в определенной позиции он должен быть разделен на 2 части, а затем обе должны двигаться раздельно с одинаковой скоростью.

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

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

Идентификатор прямоугольника: материал (1-й прямоугольник), Идентификатор прямоугольника: материал1 (2-й прямоугольник)

код, который я написал:

Rectangle {
    id: material1
    x:291
    y:187
    width: 71
    height: 10
    color: "#ff5930"

    states: [
        State{
            name: "Visible"
            PropertyChanges{target: material1; opacity: 1.0}
            PropertyChanges{target: material1; visible: true}
        },
        State{
            name:"Invisible"
            PropertyChanges{target: material1; opacity: 0.0}
            PropertyChanges{target: material1; visible: false}
        }
    ]
    transitions: [
            Transition {
                from: "Invisible"
                to: "Visible"
            PropertyAnimation {
                target: material1
                property: opacity
                duration: 11000
            }
            PropertyAnimation {
                target: material1
                property: visible
                duration: 0
            }
            }
    ]
    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation{ from: 291 ; to: 1008
            duration: 11000
        }
    }
}
Rectangle {
    id: material
    x: 159
    y: 187
    width: 71
    height: 10
    color: "#ff5930"
    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation{ from: 159 ; to: 1008
            duration: 11000
        }        
    }
}

Answer 1

Я не вижу кода, где вы пытаетесь создать 2 элемента из заданного.Вы должны скопировать элемент перед удалением, сохраняя направление на то, что вы хотите.Я бы сделал это следующим образом:

MyItem.qml

import QtQuick 2.11

Rectangle {
    signal itemBeforeDelete(Item item)
    signal itemDestroyed(Item item)

    id: item
    width: 50
    height: 50
    radius: 25
    color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    x: 50 + Math.round(Math.random() * 700)
    y: 50 + Math.round(Math.random() * 500)
    property int dx: Math.round(Math.random() * 10) - 5
    property int dy: Math.round(Math.random() * 10) - 5
    property int maxTicks: 100 + Math.round(Math.random() * 500)
    function tick() {
        item.maxTicks --;
        x += item.dx;
        y += item.dy;
        if(x <= 0|| ((x + width)>= parent.width - dx))
            item.dx *= (-1);
        if(y <= 0|| ((y + height)>= parent.height - dy))
            item.dy *= (-1);

        if(item.maxTicks == 0) {
            item.state = "target"
        }
    }
    state: "initial"
    states: [
        State {
            name: "initial"
            PropertyChanges { target: item; opacity: 1 }
        },
        State {
            name: "target"
            PropertyChanges { target: item; opacity: 0 }
        }
    ]

    transitions: Transition {
        from: "initial"
        to: "target"
        SequentialAnimation {
            ScriptAction { script: item.itemBeforeDelete(item); }
            PropertyAnimation { target: item; property:"opacity"; duration: 1000 }
            ScriptAction { script: item.itemDestroyed(item); }
        }
    }
}

main.qml

import QtQuick 2.11
import QtQuick.Controls 2.4

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Timer {
        id: timer
        interval: 20
        repeat: true
        running: true
        onTriggered: {
            for(var i = 0;i < mainWindow.contentItem.children.length;i++)
            {
                mainWindow.contentItem.children[i].tick();
            }
        }
    }

    function createChildrenFromItem(item) {
        var component = Qt.createComponent("MyItem.qml");
        if (component.status === Component.Ready)
        {
            var offsetx = Math.round(Math.random() * 4) - 2;
            var offsety = Math.round(Math.random() * 4) - 2;
            var params = item ? {
                                    "x": item.x,
                                    "y": item.y,
                                    "dx": item.dx + offsetx,
                                    "dy": item.dy + offsety
                                } :{}
            var obj = component.createObject(mainWindow.contentItem, params);
            obj.itemBeforeDelete.connect(onBeforeDelete);
            obj.itemDestroyed.connect(onDestroyed);
        }
    }

    function onBeforeDelete(item)
    {
        createChildrenFromItem(item);
        createChildrenFromItem(item);
    }

    function onDestroyed(item)
    {
        item.destroy();
    }

    Component.onCompleted: {
        createChildrenFromItem();
    }
}