2

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:

enter image description here

FS93
  • 51
  • 4

0 Answers0