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

Question

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

在网上搜索后，我在 SO 上遇到了这个问题，它建议使用两个不同的Image元素并修改不透明度以获得这种效果。这适用于普通Images，但UbuntuShape由于圆角等原因，不适用于 a 内。（您可能会建议我重新分配该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

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

\n\n

import QtQuick 2.0\n\nimport Ubuntu.Components 0.1\n\nItem {\n\n    id: root\n\n    state: "ubuntu"\n\n    property alias source : img.source\n    property alias alt_source : img2.source\n\n    /* Signals to connect through. See onCompleted of mouseArea for an example */\n    signal clicked\n\n    function swapImage() {\n        state = state == "one" ? "two" : "one"\n    }\n\n    MouseArea {\n        id: mouseArea\n        anchors.fill: parent\n        Component.onCompleted: {\n            mouseArea.clicked.connect(root.clicked)\n        }\n    }\n\n    UbuntuShape {\n        id: shape\n\n        anchors.fill: parent\n\n        image: Image {\n            id: img\n            fillMode: Image.PreserveAspectCrop\n        }\n    }\n    UbuntuShape {\n        id: shape2\n        anchors.fill: shape\n\n        opacity: 0\n\n        image: Image {\n            id: img2\n            fillMode: Image.PreserveAspectCrop\n        }\n    }\n    states: [\n        State {\n            name: "one"\n\n            PropertyChanges {\n                target: shape2\n                opacity: 1\n            }\n            PropertyChanges {\n                target: shape\n                opacity: 0\n            }\n        },\n        State {\n            name: "two"\n\n            PropertyChanges {\n                target: shape\n                opacity: 1\n            }\n            PropertyChanges {\n                target: shape2\n                opacity: 0\n            }\n        }\n    ]\n    transitions: Transition {\n        NumberAnimation {\n            properties: "opacity"\n            duration: 1000\n            easing.type: Easing.InOutQuad\n        }\n    }\n}\n

\n\n

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

\n\n

import QtQuick 2.0\n\nimport Ubuntu.Components 0.1\n\nMainView {\n\n    width: units.gu(100)\n    height: units.gu(75)\n\n    Page {\n        title : "Erm"\n\n        UbuntuSwappableImage {\n            anchors.fill: parent\n            anchors.margins: units.gu(10)\n\n            source: "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo14.png"\n            alt_source: "http://design.ubuntu.com/wp-content/uploads/canonical-logo1.png"\n\n            onClicked: swapImage()\n\n        }\n    }\n}\n

\n\n

我想它应该为调用者提供更多的钩子来改变东西，但现在对我来说已经足够了\xe2\x84\xa2。

\n