Unsolved 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; }
}