Some QML animation technique

I wanted to learn QML's animation so I thought of creating simple game which use lots of animation effect. I will soon update more detail about game itself when I finished it. But for now I wanted to share whatever I learned by creating my simple QML based game.

Following are some handy animation code, which I created while creating game.

Controlling Animation from Function and using sequential animation.

In following code, I have created a standalone sequential animation and controlling that animation from animate function.

import Qt 4.7

Rectangle {
    id: window
    width:  200
    height: 400
    
    SequentialAnimation {
        id: anim
        property string color: "lightgreen"

        PropertyAnimation {
            target: window
            properties:"color"
            to: anim.color
            duration:100
        }

        PauseAnimation { duration: 100 }

        PropertyAnimation {
            target: window
            properties:"color"
            to: "darkgreen"
            duration:100
        }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            animate();
        }
    }

    function animate() {
        anim.color = "lightgreen"
        anim.running = true;
    }
}

Starting animation on property change.

Following code perform Behavior animation on smallRect when ever we change its x value. Behaviour animation can also be applied on other property like width, height, color etc...

smallRect.x = 200

  Rectangle {
        color: "blue"
        id:smallRect
        width: 100;height: 200;
        x:100;y:50;

        Behavior on x { PropertyAnimation { duration: 1500 } }
  }

Performing animation on component creation.

If you want to perform animation when component is created then you can put animation code inside Component.onCompleted method like following. This code is more useful if you are creating animation dynamically on runtime. If have created QML element statically then you might want to perform animation when opacity changes.

Component.onCompleted : {
        animate();
    }

Performing animation on component destruction.

Following code perform animation when object is destroyed. Like above code this is also more useful when object is constructed and destroyed at runtime.

Animation is performed when we call remove function. Remove function will start opacity change animation and when animation is complete it will destroy parent QML animation.

Rectangle {
        color: "blue"
        id:smallRect
        width: 100;height: 200;
        x:100;y:50;

        NumberAnimation {
            id:removeAnim
            target:smallRect
            properties:"opacity"
            to:0
            duration:1000
            onRunningChanged: {
                if(running == false ) {
                    smallRect.destroy();
                }
            }
        }

        function remove()
        {
            removeAnim.running = true;
        }
    }

Pausing and resuming animation.

Following code demostrate how to pause and resume animation. We can control animation by using running property of animation.

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //animate();
            if( anim.running == false ) {
                //starting animation
                anim.running = true;
            } else {
                //pausing animation
                anim.running = false;
            }
        }
    }

I hope above code is helpful.

Sprite animation from sprite sheet using QML

Recently I was going through my old code, found code for sprite animation from sprite sheet. I wondered how same can be done with QML.

After little playing with QML and little bit of google. I came up with following code.

Following code is for my sprite QML element in Sprite.qml file. Here main trick is to use clip property of Item element. Which clips own painting, as well as the painting of its children, to its bounding rectangle.

Item{
    id:sprite
    clip: true
    property alias running: timer.running;
    property int frame:0
    property int frameCount: 0;
    property alias source:image.source

    Image{
         id:image
         x:-sprite.width*sprite.frame
     }

    Timer {
        id:timer
        interval: 200; running: false; repeat: true
        onTriggered: {
            nextFrame();
        }
    }

    function nextFrame() {
        sprite.frame = ++sprite.frame  % sprite.frameCount
    }
}

Following code shows how we can use above code.

Rectangle {
    width: 400
    height: 100

    Sprite {
        x:150
        width: 64;height: 64
        source: "dragon.png"
        running: true
        frameCount: 5
    }
}

Following is demo from above code.

Working with Red Hat OpenShift from Ubuntu

Today I learned about Red Hat OpenShift platform, its free cloud service that enable developers to deploy applications written in multiple frameworks and languages across clouds. Please find more information from here.

But it looks like Official tools from Red Hat are supported on Red Hat Enterprise Linux / Fedora only. But we can also install same tools on Ubuntu as well.

I followed following steps.

Install git-code,ruby and openssh.

sudo apt-get install git-core openssh-client ruby-full 
sudo apt-get install rubygems1.8

Install gem.

sudo gem install --source http://gems.rubyforge.org 
--source https://openshift.redhat.com/app/repo/ rhc

Now we have tools ready, we need to create domain name.

/var/lib/gems/1.8/bin/rhc-create-domain -n DOMAIN_NAME -l EMAIL_ID

We have created domain, Now we can create application by following.

/var/lib/gems/1.8/bin/rhc-create-app -a TEST_APP_NAME -t php-5.3.2

Now we can publish web application by following.

cd TEST_APP_NAME/

nano php/index.php 

git commit -a -m "first time change"

git push

So we successfully published our application, we can verify it by typing following URL.

http://TEST_APP_NAME-DOMAIN_NAME.rhcloud.com/

Here is my test application.