Crossfade using states and transitions



  • Am trying to get qml to crossfade two images but am having no luck. The code below appears to fade but no image is displayed. Can someone see the error(s)

    main.qml
    Background{id:background}

    Background.qml

    Image {
    id: topImage
    width: parent.width
    height: parent.height
    opacity: 1
    smooth: true
    source:"../../assets/red.jpg"

    Image   {
        id: bottomImage
        width:parent.width
        height: parent.height
        anchors.fill: parent
        opacity: 0
        smooth: true
        source:""
    }
    
    states: [
        State   { // fade out the top image and fade in the bottom image
            name: "fadeTop"
            when: bottomImage.status==Image.Ready
            PropertyChanges { target:topImage;opacity:0}
            PropertyChanges { target:bottomImage;opacity:1}
        },
        State {
            name: "fadeBottom"
            when: topImage.status==Image.Ready
            PropertyChanges { target: topImage;opacity:1}
            PropertyChanges { target:bottomImage;opacity:0}
        }
    ]
    
    transitions: [
        Transition {
            to: "fadeTop"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
                NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
            }
            onRunningChanged: {
                console.log("running fadeTop finished");
                if(!running) busy.running=false;
            }
        },
        Transition  {
            to: "fadeBottom"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
                NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
            }
            onRunningChanged: {
                console.log("running fadeBottom finished");
                if(!running) busy.running=false;
            }
        }
    ]
    
    function    toggler()   {
        console.log("*********************** Toggler Entered************************");
    
        console.log("backgroundUrl is " + backgroundUrl)
        if(topImageVisible) { // fade out the top image and fade in the bottom image
            bottomImage.source=backgroundUrl;
            background.state="fadeTop";
        }
    
        else { // fade out the bottom image and fade in the top image
            topImage.source=backgroundUrl;
            background.state="fadeBottom"
        }
    
        topImageVisible = !topImageVisible;
    
    }
    

    }


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.