sysv
8th September 2016, 23:25
Been trying to crossfade 2 images using states and transitions but can't seem to find my newbie error. Upon clicking the image fades correctly the 1st time then from then from then on fails. Here is the code. Anyone see my error(s)
Item {
anchors.fill: parent
states: [
State { // this will fade in rect2 and fade out rect
name: "fadeInRect2"
PropertyChanges { target: rect; opacity: 0}
PropertyChanges { target: rect2; opacity: 1}
},
State { // this will fade in rect and fade out rect2
name:"fadeOutRect2"
PropertyChanges { target: rect;opacity:1}
PropertyChanges { target: rect2;opacity:0}
}
]
transitions: [
Transition {
to: "fadeInRect2"
ParallelAnimation {
NumberAnimation { properties: "opacity"; from:1;to:0;easing.type: Easing.InOutQuad; duration: 2500 }
NumberAnimation { properties: "opacity"; from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500 }
}
onRunningChanged: {
if(!running) busyIndicator.running=false;
}
},
Transition {
to: "fadeOutRect2"
ParallelAnimation {
NumberAnimation { properties: "opacity";from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500 }
NumberAnimation { properties: "opacity";from:1;to:0;easing.type:Easing.InOutQuad; duration:2500}
}
onRunningChanged: {
if(!running) busyIndicator.running=false;
}
}
]
Image {
id: rect2
smooth: true
opacity: 0
anchors.fill: parent
onStatusChanged: {
if(rect2.status===Image.Ready) {
console.log('rect2 img is ready');
fader.state='fadeInRect2';
console.log('doing fadeInRect2');
}
}
}
Image {
id: rect
smooth: true
anchors.fill: parent
opacity: 1
onStatusChanged: {
if(rect.status===Image.Ready) {
console.log('rect img is ready');
fader.state='fadeOutRect2';
console.log('doing fadeOutRect2');
}
}
}
function toggle() {
busyIndicator.running=true;
if(!rect2.opacity) { // load to the rect that has 0 opacity
rect2.source="../../assets/red.jpg"
}
else {
rect.source="../../assets/green.jpg"
}
}
}
Item {
anchors.fill: parent
states: [
State { // this will fade in rect2 and fade out rect
name: "fadeInRect2"
PropertyChanges { target: rect; opacity: 0}
PropertyChanges { target: rect2; opacity: 1}
},
State { // this will fade in rect and fade out rect2
name:"fadeOutRect2"
PropertyChanges { target: rect;opacity:1}
PropertyChanges { target: rect2;opacity:0}
}
]
transitions: [
Transition {
to: "fadeInRect2"
ParallelAnimation {
NumberAnimation { properties: "opacity"; from:1;to:0;easing.type: Easing.InOutQuad; duration: 2500 }
NumberAnimation { properties: "opacity"; from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500 }
}
onRunningChanged: {
if(!running) busyIndicator.running=false;
}
},
Transition {
to: "fadeOutRect2"
ParallelAnimation {
NumberAnimation { properties: "opacity";from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500 }
NumberAnimation { properties: "opacity";from:1;to:0;easing.type:Easing.InOutQuad; duration:2500}
}
onRunningChanged: {
if(!running) busyIndicator.running=false;
}
}
]
Image {
id: rect2
smooth: true
opacity: 0
anchors.fill: parent
onStatusChanged: {
if(rect2.status===Image.Ready) {
console.log('rect2 img is ready');
fader.state='fadeInRect2';
console.log('doing fadeInRect2');
}
}
}
Image {
id: rect
smooth: true
anchors.fill: parent
opacity: 1
onStatusChanged: {
if(rect.status===Image.Ready) {
console.log('rect img is ready');
fader.state='fadeOutRect2';
console.log('doing fadeOutRect2');
}
}
}
function toggle() {
busyIndicator.running=true;
if(!rect2.opacity) { // load to the rect that has 0 opacity
rect2.source="../../assets/red.jpg"
}
else {
rect.source="../../assets/green.jpg"
}
}
}