web-dev-qa-db-fra.com

Comment obtenir une UbuntuShape pour effectuer une transition (fondu) entre différentes images?

J'ai du code QML à l'aide de la boîte à outils de l'interface utilisateur. Lorsque vous cliquez sur l'image, elle bascule entre deux logos différents. J'ai essayé de faire utiliser la transition à une animation mais cela ne fonctionne pas; une fois la durée écoulée, l'image change brusquement. Ce n'est pas dû à un retard du réseau car vous obtenez le même comportement si vous remplacez les images par des URL locales à la place.

Après avoir cherché sur le Web, je suis tombé sur cette question sur SO qui suggère d'utiliser deux éléments Image différents et de modifier l'opacité pour obtenir cet effet. Cela fonctionne avec des Images simples, mais pas à l'intérieur d'un UbuntuShape en raison de l'arrondi des coins et autres. (Vous pourriez suggérer que je réaffecte la propriété image mais cela ne fonctionne pas non plus, ce qui est ce bogue ).

Puis-je faire cela d'une manière qui approche de cette manière simpliste avec un UbuntuShape? Sinon, comment puis-je obtenir le même effet sans changer l'apparence?

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 : Mise à jour de la transition utilisée. Je suis conscient que ma compréhension des transitions est un peu fragile, donc mon problème pourrait simplement être une erreur ici.

edit 2 : Je l'ai vraiment animé, ce qui est un progrès. Ce n'est pas bien cependant; l'image se met à jour et l'opacité s'estompe. Je veux qu'elle se fonde entre les images. Je commence à penser que je ne veux pas utiliser les états.

application-developmentubuntu-touchqmlsdk
6
Iain Lane

Je l'ai résolu assez bien pour mes besoins maintenant. La solution consistait à utiliser deux UbuntuImages. Je l'ai transformé en composant réutilisable:

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

Je mets cela dans un fichier appelé UbuntuShape.qml puis utilisé à partir d'un autre fichier comme celui-ci

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()

        }
    }
}

J'imagine que cela devrait fournir plus de crochets aux appelants pour changer des choses, mais c'est Good Enough ™ pour moi pour l'instant.

0
Iain Lane