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