qt qml：水平淡出圖像（即從左到右...不是整個圖像）

Question

我使用PathLine一次水平顯示3個圖像。 左側和右側圖像需要顯示爲從右側褪色50％從左側&褪色50％。 在這裏，我不能使用黑色的矩形漸變來顯示淡入淡出效果，因爲我的父級是透明的20％透明&它漂浮在背景視頻上。

那麼有什麼辦法可以將不透明屬性應用爲水平淡化動畫嗎？

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進行訪問。