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.


Log in to reply
 

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