Namespaces

Variants
Actions

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.

Simple Animation using QML

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Created: chintandave_er (04 Feb 2011)
Last edited: hamishwillee (24 Jul 2012)

Contents

Introduction

This article shows how to create simple animation using various QML Animation Elements like Behavior and Easing. Below are some QML files that create some simple animation.

Behavior Animation

This example shows how to use QML behaviors. Just click on the screen and balls follow your mouse. To get more information about Behavior Animation, click here Behavior

AnimationQML1.png


// AnimationQML1.qml
 
import Qt 4.7
 
Item {
id: item1
width: 800
height: 640
 
Rectangle {
id: rect
width: parent.width
height: parent.height
color: "#533037"
}
Image {
id: img
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 400 } }
Behavior on y { PropertyAnimation { duration: 400 } }
}
Image {
id: img1
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 300 } }
Behavior on y { PropertyAnimation { duration: 300 } }
}
Image {
id: img2
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 200 } }
Behavior on y { PropertyAnimation { duration: 200 } }
}
Image {
id: img3
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 100 } }
Behavior on y { PropertyAnimation { duration: 100 } }
}
Image {
id: img4
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 500 } }
Behavior on y { PropertyAnimation { duration: 500 } }
}
Image {
id: img5
source: "images/Bluebubble.png"
Behavior on x { PropertyAnimation { duration: 650 } }
Behavior on y { PropertyAnimation { duration: 650 } }
}
MouseArea {
anchors.fill: parent
onMousePositionChanged: { img.x = mouse.x -40 ; img.y = mouse.y-40 ; img1.x = mouse.x -40 ; img1.y = mouse.y-40 ; img2.x = mouse.x -40 ; img2.y = mouse.y-40 ; img3.x = mouse.x -40 ; img3.y = mouse.y-40 ; img4.x = mouse.x -40 ; img4.y = mouse.y-40; img5.x = mouse.x -40 ; img5.y = mouse.y-40 }
}
 
}


Easing Animation

This example shows the easing mode animations. By adding some more animation you can make this Animation more animated. To get more information about Easing Animation please click here Easing

AnimationQML2.JPG

// AnimationQML1.qml
import Qt 4.7
 
Item {
id: item1
width: 400
height: 400
Rectangle {
id: rect
width: 400
height: 400
color: "#e8dcde"
}
Image {
id: img
source: "images/bubble.png"
x: 45
y: 65
PropertyAnimation on x { easing.type: Easing.InBounce; to: 200; duration: 6000; loops: Animation.Infinite}
PropertyAnimation on y { easing.type: Easing.InBack; to: 400; duration: 6000; loops: Animation.Infinite}
}
Image {
id: img1
source: "images/Bluebubble.png"
x: 05
y: 255
PropertyAnimation on x { easing.type: Easing.InOutQuart; to: 200; duration: 6000; loops: Animation.Infinite}
PropertyAnimation on y { easing.type: Easing.CosineCurve; to: 300; duration: 6000; loops: Animation.Infinite}
}
Image {
id: img2
source: "images/Greenbubble.png"
x: 145
y: 165
PropertyAnimation on x { easing.type: Easing.OutInSine; to: 300; duration: 6000; loops: Animation.Infinite}
PropertyAnimation on y { easing.type: Easing.InOutQuint; to: 200; duration: 6000; loops: Animation.Infinite}
}
 
}


Source Code

You can download the source code from File:AnimationQML.zip

~~ chintandave_er 10:06, 4 February 2011 (UTC)

This page was last modified on 24 July 2012, at 02:14.
438 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.

×