qt - QML - 需要了解如何制作波浪动画

Question

在我的 QML 游戏中，我有一些水面上有波浪。我需要一个如何制作波浪动画的想法。当波浪上下时，我只需要一些简单的动画。我尝试过使用 Image 和 AnimatedImage 制作动画 SVG。什么都不起作用。由于颜色限制，GIF 看起来不太好。可能是一些图形效果或 Sprite ？任何想法将不胜感激!

Answer 1

以下代码通过使用 sine wave公式。

Image {
    id: sourceImg
    anchors.fill: parent
    source: "../images/src.png"
    visible: false
}

ShaderEffect {
    anchors.fill: parent
    property variant source: sourceImg
    property real frequency: 1
    property real amplitude: 0.1
    property real time: 0.0
    NumberAnimation on time {
        from: 0; to: Math.PI*2; duration: 10000; loops: Animation.Infinite
    }
    fragmentShader: "
                    varying highp vec2 qt_TexCoord0;
                    uniform sampler2D source;
                    uniform lowp float qt_Opacity;
                    uniform highp float frequency;
                    uniform highp float amplitude;
                    uniform highp float time;
                    void main() {
                        highp vec2 texCoord = qt_TexCoord0;
                        texCoord.y = amplitude * sin(time * frequency + texCoord.x * 6.283185) + texCoord.y;
                        gl_FragColor = texture2D(source, texCoord) * qt_Opacity;
                    }"
}