Image masks alternative for QML items

testbomber

Please advise "image masks":http://goo.gl/Wh06gJ alternative approach for QML items.

I have:

Root rectangle with gradient ( Yellow to red and vice versa )
On screen rectangle (anchors.fill: parent) with gradient from "#0000FF" to "#ff00ff"
64x64 Green rectangle (moving by y)
Text
... 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?

!http://i.stack.imgur.com/RtIH8.png(qml image mask)!

@ 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
}}@

p3c0

IMO, using "States":http://qt-project.org/doc/qt-5/qtquick-statesanimations-states.html and "Transitions":http://qt-project.org/doc/qt-5/qml-qtquick-transition.html would be a good way to implement the above.

testbomber

I need to combine together three QML items into one

p3c0

You mean these items should overlap eachother, right ?

testbomber

They should blends together as on image in my first post.

p3c0

Did you try using "blend":http://qt-project.org/doc/qt-5/qml-qtgraphicaleffects-blend.html ?

testbomber

Thank you for blend, it could help. I have written small code bellow, actually it works not as expected. I need "TEST" caption blended with green color. When I try to do this (just uncomment lines in code) it blends incorrectly. What is wrong ?

@import QtQuick 2.1
import QtGraphicalEffects 1.0

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 {
    id: group1
    anchors.fill: parent     // Size must be same as parent
    color: "transparent"    
    visible: false;

    Rectangle {
        color: "black"
        width: 64; height: 64; x: 0

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

Rectangle {
    anchors.fill: parent
    id: group2
    visible: false;

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

Rectangle {
    id: group3
    anchors.fill: parent
    color: "transparent"
    visible: false;

    Text {
        text: "TEST text"
        color: "black"
        font.pointSize: 20
    }
}


Rectangle {
    anchors.fill: group3
    id: group4
    visible: false;
    color: "green"
}

Blend {
    id: myEffect
    anchors.fill: group1
    source: group1
    foregroundSource: group2
    mode: "difference"
}

// Blend {
// id: myEffect2
// anchors.fill: group3
// source: group3
// foregroundSource: group4
// mode: "difference"
// }

Blend {
    anchors.fill: myEffect
    source: myEffect
    foregroundSource: group3 //myEffect2
    mode: "multiply"
}

}
@

p3c0

Hi,

It appears to be green.
![url=http://postimg.org/image/o4cyswj1r/][img]http://s27.postimg.org/o4cyswj1r/Screenshot_from_2014_07_14_15_55_33.jpg[/img]/url!

testbomber

It should be blended with moving rectangle and displayed only when rectangle on the top.
Like this
!http://i.stack.imgur.com/YUs82.png(combine effects)!