I have two SVG files that I am animating, one is a fixed figure that is centered in the screen, while the other is a second shape coming from the bottom of the screen and ending up overlapping a bit on the first shape:
Image {
id: progressIconFix
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
source: "../../images/Progress2-01.svg"
}
Image {
id: progressIcon
y: screenHeight
anchors.horizontalCenter: parent.horizontalCenter
source: "../../images/Progress1-01.svg"
states: State {
name: "visible";
when: progressIcon.visible;
PropertyChanges {
target: progressIcon;
y: progressIconFix.height + 180;
}
}
transitions: Transition {
from: "";
to: "visible";
reversible: true;
ParallelAnimation {
NumberAnimation {
properties: "y";
duration: 1050;
easing.type: Easing.InOutQuad;
}
}
}
}
I would like to make it so that when the second shape overlaps with the fixed one, the overlapped area (and only the overlap) between the two gets blended with a "multiply" effect. However, if I use:
Blend {
anchors.fill: progressIconFix
source: progressIconFix
foregroundSource: progressIcon
mode: "multiply"
}
The moving shape gets blended since the beginning in its entirety, but I would really like this effect to happen only when it overlaps the fixed shapes and only on the intersection area of the two.
Something like this should be happening: