QML : Fade in / Fade out animation for Image Element

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   
    }