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 effect

    Below is the referred documentation

    @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.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^^


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.