Ubuntu: How do I get an UbuntuShape to transition (fade) between different images?


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.


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »