如何在图像中制作渐变不透明度？

Question

如何在 qml 中使图像淡入淡出？我如何实现这种效果？在这里，我附上了我希望它看起来如何的图像

Answer 1

一个可能的解决方案是使用 OpacityMask with a LinearGradient 作为来源

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 600
    height: 600
    title: qsTr("Hello World")
    Image {
        id: input
        source: "input.jpg"
        anchors.fill: parent

        OpacityMask {
            source: mask
            maskSource: input
        }

        LinearGradient {
            id: mask
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.2; color: "transparent"}
                GradientStop { position: 0.5; color: "white" }
            }
        }
    }
}

输入：

输出：

Answer 2

虽然公认的解决方案达到了预期的效果，但它实际上并没有在原始图像中创建不透明度渐变（这正是我所需要的）。它只是将 LinearGradient 叠加在图像之上； OpacityMask 没有做任何事情，可以从该示例中删除。图片底部的白色来自 LinearGradient，而非背景。

下面是如何在原始图像中创建不透明度渐变的示例。请注意，“源图像”（在本例中为 Rectangle）和 LinearGradient 的可见性均为 false。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")
    
    // The background, to ensure it's working
    Rectangle {
        color: "red"
        anchors.fill: parent
    }

    // The "source image"
    Rectangle {
        id: blueBox
        color: "blue"
        anchors.fill: parent
        opacity: 0.5
        visible: false
    }
    
    LinearGradient {
        id: mask
        anchors.fill: blueBox
        gradient: Gradient {
            GradientStop {
                position: 0.2
                color: "transparent"
            }
            GradientStop {
                position: 0.5
                color: "white"
            }
        }
        visible: false
    }
    
    OpacityMask {
        anchors.fill: parent
        source: blueBox
        maskSource: mask
    }
}

如何在图像中制作渐变不透明度？

How do I make a gradient opacity in an image?

qt

gradient

opacity

qml

qt5