如何让 UbuntuShape 在不同图像之间过渡（淡入淡出）？

Question

我有一些使用 UI 工具包的 QML 代码。单击图像时，它会在两个不同的徽标之间切换。我尝试使用动画进行过渡，但不起作用；持续时间过后，图像会突然改变。这不是由于网络延迟，因为如果您用本地 URL 替换图像，您会得到相同的行为。

在网上搜索后，我偶然发现了这个问题这表明使用两个不同的Image元素并修改不透明度以获得此效果。这适用于普通的Images，但不适用于内部，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
                }
            }
        }
    }
}

编辑：更新了正在使用的过渡。我知道我对过渡的理解有点不稳定，所以我的问题可能只是这里的一些错误。

编辑2：让它真正动起来，这是一个进步。但这并不正确；图像更新，不透明度逐渐减弱。我希望它在图像之间淡入淡出。我开始想我不想使用状态。

Answer 1

我已经很好地解决了这个问题，足以满足我的目的。解决方案是使用两个UbuntuImage。我把它做成了一个可重复使用的组件：

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

我将其放入一个名为的文件中UbuntuShape.qml，然后从另一个文件中使用它，如下所示

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

        }
    }
}

我想它应该为调用者提供更多的钩子来改变东西，但就目前而言它对我来说已经足够好了™。