How to flip the image like flippable clock
-
Hi Folks am trying to make a flippable clock in QML.
But am not able to get the flippable effect as desired, I have referred the documentation of flip method, took that as base for further development.
Tried various approaches but didn't succeed. Any idea how to get that effectBelow is the referred documentation
@import QtQuick 1.0
Flipable {
id: flipable
width: 240
height: 240property bool flipped: false front: Image { source: "front.png"; anchors.centerIn: parent } back: Image { source: "back.png"; anchors.centerIn: parent } transform: Rotation { id: rotation origin.x: flipable.width/2 origin.y: flipable.height/2 axis.x: 1; axis.y: 0; axis.z: 0 // set axis.y to 1 to rotate around y-axis angle: 0 // the default angle } states: State { name: "back" PropertyChanges { target: rotation; angle: 180 } when: flipable.flipped } transitions: Transition { NumberAnimation { target: rotation; property: "angle"; duration: 4000 } } MouseArea { anchors.fill: parent onClicked: flipable.flipped = !flipable.flipped }
}@
-
I don't see anything wrong, and it works in my project as this :) !
-
what I desired to have flip that image on x -axis through half of its height as we get in flippable clock
-
Then try axis.x: 0; axis.y: 1; axis.z: 0....or the third axe^^