animated image in a schadermask

[RoChris]

Hi,

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

1125211253

The blue pixmap rotate and can only seen in the black area.
For that I use the maskshader form 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?

[wysota]

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

[RoChris]

Insane! Thanks

[wysota]

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