Image masks alternative for QML items

[klep]

Please advise image masks alternative approach for QML items.

I have:

1. Root rectangle with gradient ( Yellow to red and vice versa )
2. On screen rectangle (anchors.fill: parent) with gradient from "#0000FF" to "#ff00ff"
3. 64x64 Green rectangle (moving by y)
4. Text
5. ... possible any other items

I need to combine them together like picture below!
Something similar does image mask in sprite animation.
So, The result should be: Moving rectangle 64x64 with color change from "#0000FF" to "#ff00ff" and "TST" title on it.

Could you advise me which methods in QML is the best for this transformation?

Rectangle {
    width: 256
    height: 256
    id: root
 
    SequentialAnimation on color {
        loops: Animation.Infinite
        ColorAnimation { from: "yellow"; to: "red"; duration: 4000 }
        ColorAnimation { from: "red"; to: "yellow"; duration: 4000 }
    }
 
    Rectangle {
        anchors.fill: parent
        id: item1
 
        SequentialAnimation on color {
            id: anime;
            loops: Animation.Infinite
            ColorAnimation { from: "#0000FF"; to: "#ff00ff"; duration: 2000 }
            ColorAnimation { from: "#ff00ff"; to: "#0000FF"; duration: 2000 }
        }
    }
 
    Item {
        id: mask
        anchors.fill: parent
 
        Rectangle {
            id: item2
            color: "green"
            width: 64; height: 64; x: 10
 
            SequentialAnimation on y {
                running: true
                loops: Animation.Infinite
                NumberAnimation {
                    to: root.height-64
                    duration: 2000
                }
                NumberAnimation {
                    to: 0
                    duration: 2000
                }
            }
        }
    }
 
    Text {
        id: text1
        parent: item2
        text: "TST"
        color: "yellow"
        font.pointSize: 10
    }}

Rectangle {
    width: 256
    height: 256
    id: root

    SequentialAnimation on color {
        loops: Animation.Infinite
        ColorAnimation { from: "yellow"; to: "red"; duration: 4000 }
        ColorAnimation { from: "red"; to: "yellow"; duration: 4000 }
    }

    Rectangle {
        anchors.fill: parent
        id: item1

        SequentialAnimation on color {
            id: anime;
            loops: Animation.Infinite
            ColorAnimation { from: "#0000FF"; to: "#ff00ff"; duration: 2000 }
            ColorAnimation { from: "#ff00ff"; to: "#0000FF"; duration: 2000 }
        }
    }

    Item {
        id: mask
        anchors.fill: parent

        Rectangle {
            id: item2
            color: "green"
            width: 64; height: 64; x: 10

            SequentialAnimation on y {
                running: true
                loops: Animation.Infinite
                NumberAnimation {
                    to: root.height-64
                    duration: 2000
                }
                NumberAnimation {
                    to: 0
                    duration: 2000
                }
            }
        }
    }

    Text {
        id: text1
        parent: item2
        text: "TST"
        color: "yellow"
        font.pointSize: 10
    }}

To copy to clipboard, switch view to plain text mode