qt quick实现的水波纹特效：横向波纹、纵向波纹效果

一直以来使用c++ qt如果要实现一些高级特效比如水波纹效果都难度比较大，但是使用qt quick难度就会小很多。这里借鉴一些网友的思路简单实现一下水波纹效果。主要思路就是波浪的形成是基于sin曲线，以此来影响纹理坐标的颜色，然后加上时间动画不断改变曲线的坐标，从而达到一个波动效果。

1.横向波纹效果

Window {visible: truewidth: 800height: 600title: "Water Ripple Effect"Image {id: sourceImgwidth: 800height: 600source: "qrc:/12.png"}ShaderEffectSource {id: shaderSourcesourceItem: sourceImglive: true}ShaderEffect {id: waterEffectanchors.fill: parentproperty variant sourceTexture: shaderSourceproperty real frequency: 10property real amplitude: 0.04property real time: 0.0NumberAnimation on time {from: 0.0to: Math.PI*2duration: 1000loops: Animation.Infinite}fragmentShader: "varying highp vec2 qt_TexCoord0;uniform sampler2D sourceTexture;uniform highp float frequency;uniform highp float amplitude;uniform highp float time;void main() {highp vec2 pulse = sin(time - frequency * qt_TexCoord0);highp vec2 coord = qt_TexCoord0 + amplitude * vec2(pulse.x, -pulse.x);gl_FragColor = texture2D(sourceTexture, coord);}"}
}

效果如下-波涛汹涌：

2.另一种效果（纵向波纹）

Window {visible: truewidth: 800height: 600title: "Water Ripple Effect"Image {id: sourceImgwidth: 800height: 600source: "qrc:/12.png"}ShaderEffectSource {id: shaderSourcesourceItem: sourceImglive: true}ShaderEffect {id: waterEffectanchors.fill: parentproperty variant sourceTexture: shaderSourceproperty real frequency: 10property real amplitude: 0.08property real time: 0.0NumberAnimation on time {from: 0.0to: Math.PI * 2duration: 1000loops: Animation.Infinite}fragmentShader: "varying highp vec2 qt_TexCoord0;uniform sampler2D sourceTexture;uniform highp float frequency;uniform highp float amplitude;uniform highp float time;void main() {highp vec2 uv = qt_TexCoord0;highp float wave = sin(uv.y * frequency + time) * amplitude;uv.x += wave;gl_FragColor = texture2D(sourceTexture, uv);}"}
}

效果-树的摇曳：

修改下频率和振幅效果：

property real frequency: 60
property real amplitude: 0.02

这样看起来是不是有点波光粼粼的感觉了。挺有趣的~！0…0
代码链接奉上感兴趣的可以研究玩玩：
波纹效果代码地址

作者：费码程序猿
欢迎技术交流：QQ：255895056
转载请注明出处，如有不当欢迎指正