qt qml：水平淡化图像（即从左到右......不是整个图像）

Question

im 使用 PathLine 一次水平显示 3 张图像。 左右图像需要显示为从左侧褪色 50% 和从右侧褪色 50%。 在这里我不能使用黑色矩形渐变来显示淡入淡出效果，因为我的父母是 20% 透明的，它漂浮在背景视频上。

那么有什么方法可以将 opacity 属性应用为水平淡入淡出动画？

Answer 1

使用QML ShaderEffectItem element，您可以使用着色器程序将后期效果添加到 QML 项目。这使您可以在 GPU 上制作一些图形效果。

正如您在我上面链接的文档中看到的，这可以是例如波浪效果。通常，您对每个输出像素应用一个小“程序”。这就是GLSL中所谓的fragment shader。

为了让您了解如何在项目上实现 alpha 蒙版（这可能是您的场景，其中包含您正在制作动画的路径上的图像），我将给出一个示例，在该示例中我实现了一个简单的线性渐变作为 Alpha 蒙版，左边是零不透明度，右边是完全不透明度。

import QtQuick 1.0
import Qt.labs.shaders 1.0

Item {
    width: 300
    height: 300

    id: wrapper

    Item {
        id: scene
        anchors.fill: parent
        // Here is your scene with the images ...
    }

    ShaderEffectItem {
        anchors.fill: wrapper

        // Any property you add to the ShaderEffectItem is accessible as a
        // "uniform" value in the shader program. See GLSL doc for details.
        // Essentially, this is a value you pass to the fragment shader,
        // which is the same for every pixel, thus its name.

        // Here we add a source item (the scene) as a uniform value. Within the
        // shader, we can access it as a sampler2D which is the type used to
        // access pixels in a texture. So the source item becomes a texture.
        property variant source: ShaderEffectSource
        {
            sourceItem: scene // The item you want to apply the effect to
            hideSource: true  // Only show the modified item, not the original
        }

        // This is the fragment shader code in GLSL (GL Shading Language)
        fragmentShader: "
        varying highp vec2 qt_TexCoord0;  // The coords within the source item
        uniform sampler2D source;         // The source item texture
        void main(void)
        {
            // Read the source color of the pixel
            vec4 sourceColor = texture2D(source, qt_TexCoord0);

            // The alpha value of the mask
            float alpha = qt_TexCoord0.x; // = 0.0 at left, 1.0 at right border

            // Multiply the alpha mask on the color to be drawn:
            sourceColor *= alpha;

            // Write the pixel to the output image
            gl_FragColor = sourceColor;
        }
        "
    }
}

着色器程序中最重要的一行是alpha 变量的值。在这个小例子中，我只是将纹理坐标的 X 分量设置为 alpha 值，因此在左边界为 0，在右边界为 1。请注意，纹理坐标不是以像素为单位，而是以 [ 0..1] 范围。如果要访问像素坐标，可以使用gl_FragCoord.x/y。请注意，y 是从下到上测量的，因此 0 是下边框，height 是上边框。默认情况下，您无法访问整个生成图像的height，但因此我们可以使用制服。只需分配一个新的property int h: height 并在着色器中使用uniform float h 访问它。