Как получить UbuntuShape для перехода (fade) между разными изображениями?

У меня есть код QML с использованием инструментария пользовательского интерфейса. Когда вы нажимаете на изображение, оно переключается между двумя разными логотипами. Я попытался сделать переход, используя анимацию, но это не сработает; по прошествии продолжительности изображение резко меняется. Это происходит не из-за сетевой задержки, поскольку вы получаете такое же поведение, если вместо этого вы заменяете изображения локальными URL.

После поиска в Интернете я столкнулся с этим вопросом на SO, который предлагает использовать два разных [ f2] и изменить непрозрачность, чтобы получить этот эффект. Это работает с обычным Image s, но не изнутри UbuntuShape из-за округления угла и т. Д. (Вы можете предположить, что я переназначаю свойство image, но это тоже не работает, что является этой ошибкой).

Могу ли я сделать это в чем-то, приближающемся к этому упрощенному пути с помощью UbuntuShape? Если нет, как я могу добиться такого же эффекта, не меняя внешний вид?

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: "Erm"

        UbuntuShape {
            id: shape

            anchors.fill:  parent
            anchors.margins: units.gu (10)

            state: "ubuntu"

            image : Image {
                id : img
                fillMode: Image.PreserveAspectCrop
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (shape.state == "ubuntu")
                        shape.state = "canonical"
                    else
                        shape.state = "ubuntu"
                }
            }
            states: [
                State {
                    name: "canonical"
                    PropertyChanges {
                        target: img
                        source: "http://design.ubuntu.com/wp-content/uploads/canonical-logo1.png"
                    }
                },
                State {
                    name: "ubuntu"
                    PropertyChanges {
                        target: img
                        source: "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo14.png"
                    }
                }
            ]
            transitions: Transition {
                PropertyAnimation {
                    target: shape
                    property: "opacity"
                    easing.type: Easing.InOutQuad
                    from: 0
                    to: 1
                    duration: 1000
                }
            }
        }
    }
}

edit: Обновлен используемый переход. Я знаю, что мое понимание переходов немного шаткое, поэтому моя проблема может быть просто ошибкой здесь.

edit : Получил это, чтобы фактически оживить, что является прогрессом. Однако это не так; обновления изображений и прозрачность исчезают. Я хочу, чтобы он перекрестно перекрещивался между изображениями. Я начинаю думать, что не хочу использовать состояния.