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

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

1.横向波纹效果

Window {
    visible: true
    width: 800
    height: 600
    title: "Water Ripple Effect"

    Image {
        id: sourceImg
        width: 800
        height: 600
        source: "qrc:/12.png"
    }

    ShaderEffectSource {
        id: shaderSource
        sourceItem: sourceImg
        live: true
    }

    ShaderEffect {
        id: waterEffect
        anchors.fill: parent
        property variant sourceTexture: shaderSource
        property real frequency: 10
        property real amplitude: 0.04
        property real time: 0.0

        NumberAnimation on time {
            from: 0.0
            to: Math.PI*2
            duration: 1000
            loops: 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: true
    width: 800
    height: 600
    title: "Water Ripple Effect"

    Image {
        id: sourceImg
        width: 800
        height: 600
        source: "qrc:/12.png"
    }

    ShaderEffectSource {
        id: shaderSource
        sourceItem: sourceImg
        live: true
    }

    ShaderEffect {
        id: waterEffect
        anchors.fill: parent
        property variant sourceTexture: shaderSource
        property real frequency: 10
        property real amplitude: 0.08
        property real time: 0.0

        NumberAnimation on time {
            from: 0.0
            to: Math.PI * 2
            duration: 1000
            loops: 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
转载请注明出处，如有不当欢迎指正