Ok I managed to solve the issue:
define the Item element with the Text element inside
define the ShaderEffectSource pointing to the Item and set hideSource to true so that the actual Item doesn't show
define the ShaderEffect which uses the ShaderEffectSource (and with it the Text element)
in the ShaderEffect, set a scrolling animation for the Item/Text element to slide horizontally
and set the traditional animation for the shader (wobbly edges for the letters)
encapsulate the ShaderEffect in a rectangle with clip:true, shorter width and transparent color
Result:
the encapsulated rectangle shows sliding text inside, which is being animated with shaders for the wobbly effect.
I managed to get there by using one of the examples:
/Qt5/Qt5.0.0/5.0.0/Src/qtdeclarative/examples/quick/shadereffects
The example shows a grid 3x2 with shader examples and the 1x1 element drags with the mouse to rotate between the Text "Qt" or the images of the Qt Logo and a Smiley Face - the mouse drag and box clipping were the elements to get me there!
@
import QtQuick 2.0
import "content"
Rectangle {
id: root
width: 1280
height: 600
Image {
anchors.fill: parent
source: "content/bg.jpg"
}
//! [source]
ShaderEffectSource {
id: theSource
sourceItem: theItem
hideSource: true
}
//! [source]
Item {
id: theItem
width: 3000
height: 160
Text {
width: 3000
height: 140
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 120
font.family: "Times"
color: "blue"
text: "1234567890 abcdefghijklmnopqrstuvwxyz ABCDEF"
}
}
Rectangle {
id: marquee
clip:true
width: 400
height: 140
anchors.centerIn: parent
color: "transparent"
ShaderEffect {
id: teste
width: 3000
height: 160
property variant source: theSource
property real amplitude: 0.04 * wobbleSlider.value
property real frequency: 20
property real time: 0
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
PropertyAnimation on x {running: true; loops: Animation.Infinite; from: marquee.width; to: -teste.width; duration: 100000; }
//! [fragment]
fragmentShader:
"uniform lowp float qt_Opacity;" +
"uniform highp float amplitude;" +
"uniform highp float frequency;" +
"uniform highp float time;" +
"uniform sampler2D source;" +
"varying highp vec2 qt_TexCoord0;" +
"void main() {" +
" highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
"}"
//! [fragment]
Slider {
id: wobbleSlider
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 40
}
}
}
}
@
