Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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.

share|improve this question
    
It looks like you can't set opacity on the Image but rather have to do it on the root UbuntuShape object. I'm trying various pokages there now. Help still welcomed! –  Iain Lane Jun 11 '13 at 15:32
    
Should I just use two UbuntuShapes? –  Iain Lane Jun 11 '13 at 16:06
    
It might work better using two UbuntuShapes then just use the transition on those. –  Ken VanDine Jun 11 '13 at 19:23

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
1  
There's a CrossFadeImage component now that can be used (with some tricks) inside an UbuntuShape. See: bazaar.launchpad.net/~system-settings-touch/… –  Iain Lane Nov 21 '13 at 12:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.