Sharing information related to Qt, Maemo development and some other information

Friday, May 27, 2011

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.

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.