Question

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

那么有没有办法将opacity属性应用为水平淡入淡出动画？

Answer 1

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

正如您在上面链接的文档中所看到的，这可以是例如波浪效应。通常，您将一个小“程序”应用于每个输出像素。这是GLSL中所谓的片段着色器。

为了让您了解如何在项目上实现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访问它。

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

1 个答案: