Sunday, July 17, 2011

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.

6 comments:

  1. Button {
    id:button3
    x:340
    width:150
    text: "Quit"
    onClicked: {
    Qt.quit()
    }
    }

    Hi there. I am actually quite new to qml and qt. The above was the following code i created to quit my application but for some reason the button doesnt work. APPLICATION OUTPUT displays this error :Signal QDeclarativeEngine::quit() emitted, but no receivers connected to handle it.

    do you mind helping with my problem? thank you.

    ReplyDelete
  2. for me also this does not work properly. I generally forward exit call to my C++ QObject and quit using C++ code.

    ReplyDelete
  3. Im sorry, but how do you do that? im using the harmattan application in qt. how do i incorporate c++ together with qml files? thank you!

    ReplyDelete
  4. hi, Please check my follwing post, it shows how that can be done,

    http://kunalmaemo.blogspot.com/2011/04/signal-slot-connection-with-qml-and-qt.html

    ReplyDelete
  5. do you know i can get screenshots from the phone like you did in your blog posts?

    ReplyDelete
  6. you mean video or screen shots only ?

    For screen shot, I uses best screen snap (http://www.smartphoneware.com/screen_snap-for-s60-5th-edition-product.php) application for symbian and for Nokia N900 i use CTRL + SHIFT + P.

    For video, I generally use my other phone.

    ReplyDelete