QML：淡入/淡出图像元素的动画

Question

当Image元素的来源被更改时，是否可以有淡入/淡出动画？ 我需要两个图像元素吗？将0中的一个的不透明度更改为1，将另一个的不透明度从1更改为0？

Answer 1

这样做没有太多麻烦。以这种方式运行动画：

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

我知道它有点晚了但感觉就像分享

受 RajaRaviVarma 启发，我试过像

这样的东西

FadeInOut ImageView的Qml

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


        }

    }

并使用它像

 FadeinFadeOutImage {
        id: song_image
        imageSource: songImage
        parentWidth: width
        parentHeight: height
        width: 406*scaleFactor
        height: 406*scaleFactor   
    }