Swipe to unlock animation effect using QML

Now its raining heavily here and that provided me some free time to play with my iPod. As I was using my iPod I got curious about how that "swipe to unlock" animation could have been implemented.

I decided to implement such animation my self with QML and following is output of my effort.



If you also curious about how it can be implemented, than solution is quite simple.
The code is similar to code for Marquee text animation. To give marquee text effect, I used to change position of text element only. Here I change position of both text and parent Item element.

Here is full code. In code I created one static text in gray color which is fully visible and another text with white color which is partially visible only ans used for scrolling animation. I put this animating text inside Item element.

Now on timer event, I am increasing x position of Item element with some delta , at same time I am also reducing same delta from text x position. This will give effect as color or gray static text is changing.

import QtQuick 1.0

Item {
    id:marqueeText
    height: staticText.height
    clip: true    
    property int tempX: 0
    property alias text: staticText.text
    Text {
        x:0;y:0        
        id:staticText
        width: marqueeText.width
        color: "darkgray"
    }

    Item {
        width: 40
        height: marqueeText.height
        x: tempX
        clip: true
        Text {
            id:scrollingText
            text: marqueeText.text
            color: "white"
        }
    }

    Timer {
        id:timer
        interval: 200; running: true; repeat: true
        onTriggered:{            
            tempX = tempX + 10
            scrollingText.x = -tempX;

            if( tempX > staticText.width ) {
                tempX=-40
            }
        }
    }
}

Here is how above code can be used.

Rectangle {
        border.width: 2
        border.color: "black"
        color:"gray"
        anchors.horizontalCenter: parent.horizontalCenter
        width: 200
        height: text.height + 10
        y:100
        ScrollText {
            id:text
            width: 150
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Swipe to unlock the phone"
        }
    }

That's all. Hope you enjoyed it.