QML : Flippable Clock issue
-
I'm trying to get the flippable effect in the my designed digital clock so that i can have a flippable effect to it through context Menu. I tried to use the flippable property but go lots of errors.
Can any one please advice how to achieve the flippable effect in the on half of the digit, i mean same effect what we have in the flippable clock
Below is my sample code
@import Qt 4.7
Item {
width : 300 height : 200 id: clock property color textColor : "#727272" property int fontSize : 65 property variant hours : "00" property variant minutes : "00" property variant seconds : "00" property string date: "" property variant shift : 0 property bool showSeconds : true property bool showDate : true function timeChanged() { var d = new Date; // hours var tmp = checkTime(shift ? d.getUTCHours() + Math.floor(clock.shift) : d.getHours()) if (tmp != hours) hours = tmp // minutes tmp = checkTime(shift ? d.getUTCMinutes() + ((clock.shift % 1) * 60) : d.getMinutes()) if (tmp != minutes) minutes = tmp // seconds seconds = checkTime(d.getUTCSeconds()) // get Date date = d.getDate(); } function checkTime(i) { return (i<10) ? "0"+i : i; } Timer { interval: 1000; running: true; repeat: true; triggeredOnStart: true onTriggered: clock.timeChanged() } Column { id: columnLayout anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Row { id : rowLayout anchors.verticalCenter: parent.verticalCenter Rectangle{ id: secondsframe width : 75 height : 100 radius : 4 color:"#2c2c2c" border.width: 2 border.color: "#000000" Text { id : secondsText text: clock.seconds color: clock.textColor font.pixelSize: clock.fontSize visible : clock.showSeconds Behavior on text { SequentialAnimation { ParallelAnimation { NumberAnimation { target: secondsText; property: "opacity"; to: 0.1; duration: 200 } NumberAnimation { target: secondsText; property: "y"; to: clock.height; duration: 300 } } PropertyAction { } NumberAnimation { target: secondsText; property: "y"; to: -clock.height; duration: 0 } ParallelAnimation { NumberAnimation { target: secondsText; property: "opacity"; to: 1; duration: 200 } NumberAnimation { target: secondsText; property: "y"; to: 0; easing.type: Easing.OutBounce; duration: 400 } } } } anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } } } }
}
@I tried the animation in the sample code but was not able to have flippable effect when I used the flippable property at the same.
A code sample to achieve that effect will be highly appreciable.