Como obtenho um UbuntuShape para fazer a transição (fade) entre imagens diferentes?

Question

Eu tenho algum código QML usando o kit de ferramentas da interface do usuário. Quando você clica na imagem, ela alterna entre dois logotipos diferentes. Eu tentei fazer a transição usar uma animação, mas não funciona; após o decorrer da duração, a imagem muda abruptamente. Isso não se deve ao atraso da rede, pois você terá o mesmo comportamento se substituir as imagens por URLs locais.

Depois de pesquisar na Web, deparei-me com esta pergunta em SO que sugere usar dois elementos Image diferentes e modificar a opacidade para obter esse efeito. Isso funciona com Image s simples, mas não de dentro de um UbuntuShape devido ao arredondamento de cantos e tal. (Você pode sugerir que eu reatribua a propriedade image , mas isso também não funciona, o que é bug ).

Posso fazer isso em algo que se aproxime dessa maneira simplista com um UbuntuShape ? Se não, como posso conseguir o mesmo efeito sem mudar a aparência?

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 : atualizou a transição que está sendo usada. Estou ciente de que minha compreensão das transições é um pouco instável, então meu problema poderia ser simplesmente um erro aqui.

edit 2 : Consegui realmente animar, o que é progresso. Não está certo embora; a imagem é atualizada e a opacidade desaparece. Eu quero que ela faça crossfade entre as imagens. Estou começando a pensar que não quero usar estados.

    

Answer 1

Eu já o resolvi bem o suficiente para meus propósitos agora. A solução foi usar dois UbuntuImage s. Eu fiz isso em um componente reutilizável:

import QtQuick 2.0

import Ubuntu.Components 0.1

Item {

    id: root

    state: "ubuntu"

    property alias source : img.source
    property alias alt_source : img2.source

    /* Signals to connect through. See onCompleted of mouseArea for an example */
    signal clicked

    function swapImage() {
        state = state == "one" ? "two" : "one"
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        Component.onCompleted: {
            mouseArea.clicked.connect(root.clicked)
        }
    }

    UbuntuShape {
        id: shape

        anchors.fill: parent

        image: Image {
            id: img
            fillMode: Image.PreserveAspectCrop
        }
    }
    UbuntuShape {
        id: shape2
        anchors.fill: shape

        opacity: 0

        image: Image {
            id: img2
            fillMode: Image.PreserveAspectCrop
        }
    }
    states: [
        State {
            name: "one"

            PropertyChanges {
                target: shape2
                opacity: 1
            }
            PropertyChanges {
                target: shape
                opacity: 0
            }
        },
        State {
            name: "two"

            PropertyChanges {
                target: shape
                opacity: 1
            }
            PropertyChanges {
                target: shape2
                opacity: 0
            }
        }
    ]
    transitions: Transition {
        NumberAnimation {
            properties: "opacity"
            duration: 1000
            easing.type: Easing.InOutQuad
        }
    }
}

Eu coloco isso em um arquivo chamado UbuntuShape.qml e depois o uso de outro arquivo como este

import QtQuick 2.0

import Ubuntu.Components 0.1

MainView {

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

    Page {
        title : "Erm"

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

            source: "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo14.png"
            alt_source: "http://design.ubuntu.com/wp-content/uploads/canonical-logo1.png"

            onClicked: swapImage()

        }
    }
}

Eu imagino que isso deve fornecer mais ganchos para os chamadores mudarem de material, mas é Good Enough ™ para mim por enquanto.