Simple Animation using QML

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:AnimationQML.zip

---

Article

Created: chintandave_er (04 Feb 2011)

Last edited: hamishwillee (24 Jul 2012)

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.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

// 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)