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 Image
s, 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
UbuntuImage
s. I made it into a reusable component:I put that into a file called
UbuntuShape.qml
and then used it from another file like thisI imagine it should provide more hooks for callers to change stuff but it's Good Enoughâ„¢ for me for now.