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

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

После поиска в Интернете я наткнулся на этот вопрос о SO , который предлагает использовать два разных элемента Image и изменить непрозрачность, чтобы получить этот эффект. Это работает с обычными 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 : Обновлен используемый переход. Я знаю, что мое понимание переходов немного шатко, поэтому моей проблемой может быть просто какая-то ошибка здесь.

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