Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 01:16, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Basic Animation in QML

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): N8
Platform(s): Symbian
Keywords: Animation
Created: somnathbanik (17 May 2015)
Last edited: hamishwillee (11 Oct 2012)



This article demonstrate how to perform basic animation in QML

Basic Idea

We will create an example that displays a rectangle with colors. When we click on the screen the rectangle moves with easing effects and animated to where the mouse is clicked.


Note.pngNote: This is a very basic animation in QML for beginners

Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding Behavior elements and adding a MouseArea like below.

import QtQuick 1.0
Item {
width: 400; height: 400
Rectangle {
id: rect
width: 64; height: 64
color: "blue"
Behavior on x { PropertyAnimation { duration: 500 } }
Behavior on y { PropertyAnimation { duration: 500 } }
MouseArea {
anchors.fill: parent
onClicked: { rect.x = mouse.x; rect.y = mouse.y }

When the value of x and y changes in the Behavior declaration, it means it should animate over 500 milliseconds. Till now we have done animation without easing effects. The Easing property of animations has a number of attributes that control how the value should be varied. By changing the PropertyAnimation we can bring a bit of easing effect in our rectangle like this

Behavior on x {
PropertyAnimation {
duration: 500
easing.type: Easing.InOutElastic
easing.amplitude: 2.0
easing.period: 1.5
Behavior on y {
PropertyAnimation {
duration: 500
easing.type: Easing.InOutElastic
easing.amplitude: 2.0
easing.period: 1.5

Source Code

The full source code presented in this article is available here

Related Articles on Animation

--somnathbanik 13:04, 17 May 2011 (EEST)

This page was last modified on 11 October 2012, at 01:16.
73 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.