Ubuntu – How to get an UbuntuShape to transition (fade) between different images

application-developmentqmlsdkubuntu-touch

I have some QML code using the UI toolkit. When you click on the image, it toggles between two different logos. I've attempted to make the transition use an animation but it doesn't work; after the duration elapses the image changes abruptly. This isn't due to network delay as you get the same behaviour if you replace the images with local URLs instead.

After searching the web, I came across this question on SO which suggests to use two different Image elements and modify the opacity to get this effect. That works with plain Images, but not from within an UbuntuShape due to the corner rounding and such. (You might suggest that I reassign the image property but that doesn't work either, which is this bug).

Can I do this in something approaching this simplistic way with an UbuntuShape? If not, how can I achieve the same effect without changing the look?

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: Updated the transition being used. I'm aware my understanding of transitions is a little shaky, so my problem could simply be some error here.

edit 2: Got it to actually animate, which is progress. It's not right though; the image updates and the opacity fades in. I want it to crossfade between images. I'm starting to think I don't want to be using states.

Best Answer

I've solved it well enough for my purposes now. The solution was to use two UbuntuImages. I made it into a reusable component:

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

I put that into a file called UbuntuShape.qml and then used it from another file like this

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

        }
    }
}

I imagine it should provide more hooks for callers to change stuff but it's Good Enoughâ„¢ for me for now.

Related Question