QML : Flippable issue

Question

I 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 effect.

Below is the referred documentation code snippet

import QtQuick 1.0

 Flipable {
     id: flipable
     width: 240
     height: 240

     property 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.x 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'm not gonna answer your question. i'm going to ask you instead. can you please check my question http://stackoverflow.com/questions/13217380/how-to-flip-an-image-in-qt i need to know how to add that flippable to QMainWindow. Thanks in advance — Andrey Chernukha, Nov 06 '12 at 12:35
How do you suppose anyone can help you, if all the information you give is 'I couldn't make it work' and then copy paste a working example from the official documentation? It's your code where the problem is, not the example. — eburger, Nov 07 '12 at 07:24
I understand but the implementation is bit large to paste here..so I tried to have that effect in small POC, so I chose the official documentation, I tried to flip through X-axis as shown above, its flipping but i want only half of the image to flip not whole image. — DNamto, Nov 07 '12 at 09:01

score 1 · Accepted Answer · answered Nov 07 '12 at 11:46

You can't flip just half of an Item. To simulate a flip clock you have to use two clones of an image.

Try to add this at the end of the code above:

Item {
  anchors {top: flipable.top; horizontalCenter: flipable.horizontalCenter}
  width: flipable.width
  height: flipable.height / 2
  z: flipable.z + 1

  clip: true

  Image {
    source: "front.png";
    anchors.centerIn: parent
  }
}

Obviously this code is not the solution, it's just a hint on what you have to do for the complete solution.

QML : Flippable issue

1 Answers1