Detailed Description

Displays an image and smoothly fades when its source changes.

SmoothFadeImage is a Fluid transition utility rather than a standalone Material 3 component. Its fade duration can be selected from the application's Material 3 motion tokens.

This component can be used in place of an Image when a smooth fade animation between two sources is needed.

When the source is changed and the fade animation ends, the image loaded before is unloaded; this means that only one image at a time is loaded.

Images are loaded asynchronously and are not cache, so unlike the Image component the asynchronous and cache properties are not available.

Example of usage:

import QtQuick 2.10
import Fluid.Controls 1.0
 
Item {
    width: 128
    height: 128
 
    SmoothFadeImage {
        anchors.fill: parent
        source: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Qt_logo_2015.svg/1380px-Qt_logo_2015.svg.png"
        fillMode: Image.PreserveAspectFit
        smooth: true
        fadeDuration: 400
 
        MouseArea {
            anchors.fill: parent
            onClicked: parent.source = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1280px-Qt_logo_2016.svg.png"
        }
    }
}

Definition at line 45 of file SmoothFadeImage.qml.

The documentation for this class was generated from the following file:

src/controls/qml/effects/SmoothFadeImage.qml