animated image in a schadermask

Hi,

I tried to make a animated Icon in a special mask.

Attachment 11252Attachment 11253

The blue pixmap rotate and can only seen in the black area.
For that I use the maskshader form http://doc.qt.io/qt-4.8/http://doc.qt.io/qt-5/qml-qtquick-shadereffect.html

qml-code snippet:

Image {
id: color
width: 200
height: 200
source: "/Icon_Blink.png"
anchors.centerIn: parent

//does not work
RotationAnimation on rotation {
loops: Animation.Infinite
from: 0
to: 360
duration: 500
}
}

Image {
id: mask
anchors.fill: logo
source: "/Icon_Kranz.png"
layer.enabled: true
layer.samplerName: "maskSource"
layer.effect: ShaderEffect {
property var colorSource: ShaderEffectSource { sourceItem: color; hideSource: true}
fragmentShader: "
uniform lowp sampler2D colorSource;
uniform lowp sampler2D maskSource;
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
void main() {
gl_FragColor =
texture2D(colorSource, qt_TexCoord0)
* texture2D(maskSource, qt_TexCoord0).a
* qt_Opacity;
}
"
}
}

The backgound have to be alpha = 0.

Is there a way to rotate the surceimage of the Image or in the shader?

You can place the image in an item, rotate the image and create ShaderEffectSource from that item instead of the image.

Insane! Thanks

By the way, when using an Image, you don't need a ShaderEffectSource operating on it, you can reference the image item directly.