How to split a rectangle into 2 equal parts using QML animation? - qt

Question

Scenario: A rectangle moves horizontally with some speed and at certain position it should be split into 2 parts and then both should move separately with same speed.
I have tried adding new rectangle at that "certain" position and used opacity property and animated movement of 2 separate rectangles but not able to achieve what i wished for.
Is there any other way like when first rectangle reaches that certain position
while moving in x direction can that send a signal and 2nd rectangle start moving which should be invisible till that time.
Rectangle id: material (1st rectangle),
Rectangle id: material1(2nd rectangle)
code which i have written:
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

I see no code where you try to create 2 items from a given one. You have to copy an item before deletion keeping direction on whatever you want. I would do that in the following way:
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();
}
}