QML - 需要了解如何设置波浪动画

Question

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

Answer 1

以下代码使用a为图像创建连续波动画 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;
                    }"
}