QML : Fade in / Fade out animation for Image Element - animation

Question

Is it possible to have a fade in/out animation when the source of an Image element is being changed ?
Do I need two Image elements ? Changing the opacity of one of the from 0 to 1 and another from 1 to 0 ?

Answer 1

To do this without much hassle. Run animations in this way:
Image {
id: toBeCreated
NumberAnimation on opacity {
id: createAnimation
from: 0
to: 1
duration: 2000
}
Component.onCompleted: createAnimation.start()
}
Image {
id: toBeDeleted
NumberAnimation on opacity {
id: destroyAnimation // start this animation from the function where you want to create new Images
to: 0
duration: 2000
onRunningChanged: {
if (!running) {
console.log("Destroying...")
toBeDeleted.destroy();
}
}
}
}

Answer 2

I Know its a little late but felt like sharing
Inspired by RajaRaviVarma ans i tried something like
A Qml for FadeInOut ImageView
import QtQuick 2.0
Item {
property string imageSource : ""
property string imageSourceTemp : ""
property real parentWidth: 0
property real parentHeight: 0
onImageSourceChanged:
{
destroyAnimation.start()
createAnimation.start()
}
Image {
id: toBeDeleted
source: imageSourceTemp
width: parentWidth
height: parentHeight
NumberAnimation on opacity {
id: destroyAnimation
to: 0.5
duration: 400
onRunningChanged: {
if (!running) {
}
}
}
}
Image {
id: toBeCreated
source: imageSource
width: parentWidth
height: parentHeight
NumberAnimation on opacity {
id: createAnimation
from: 0
to: 1
duration: 800
onRunningChanged: {
if (!running) {
imageSourceTemp = imageSource
}
}
}
}
}
And to use it Like
FadeinFadeOutImage {
id: song_image
imageSource: songImage
parentWidth: width
parentHeight: height
width: 406*scaleFactor
height: 406*scaleFactor
}