animation - QML：ImageElementのフェードイン/フェードアウトアニメーション

Question

Image要素のソースが変更されているときにフェードイン/フェードアウトアニメーションを作成することはできますか？2つの画像要素が必要ですか？1つを0から1に、もう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に触発されて、私は次のようなものを試しました

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