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.