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 3×2 with shader examples and the 1×1 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
}
}
}
}
↧