Basic Animation in QML
hamishwillee
(Talk | contribs) m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan") |
hamishwillee
(Talk | contribs) m (Text replace - "<code cpp>" to "<code cpp-qt>") |
||
| (One intermediate revision by one user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:Qt]][[Category:Qt Quick]] | [[Category:Qt]][[Category:Qt Quick]] | ||
| − | {{ArticleMetaData | + | {{ArticleMetaData <!-- v1.2 --> |
| − | | | + | |sourcecode= [[Media:AnimationQt.zip]] |
| − | |platform=Symbian | + | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> |
| − | |devices= | + | |devices= N8 |
| − | |category= | + | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> |
| − | | | + | |platform= Symbian |
| + | |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) --> | ||
| + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | ||
| + | |signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer --> | ||
| + | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| + | |keywords= Animation | ||
| + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| + | |translated-by= <!-- [[User:XXXX]] --> | ||
| + | |translated-from-title= <!-- Title only --> | ||
| + | |translated-from-id= <!-- Id of translated revision --> | ||
| + | |review-by= <!-- After re-review: [[User:username]] --> | ||
| + | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
| + | |update-by= <!-- After significant update: [[User:username]]--> | ||
| + | |update-timestamp= <!-- After significant update: YYYYMMDD --> | ||
|creationdate= 17th May, 2011 | |creationdate= 17th May, 2011 | ||
| − | | | + | |author= [[User:Somnathbanik]] |
| − | + | <!-- The following are not in current metadata --> | |
| − | + | |subcategory= UI | |
| − | + | ||
| − | | | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}} | }} | ||
| Line 23: | Line 30: | ||
==Basic Idea== | ==Basic Idea== | ||
| − | We will create an example that displays a rectangle with colors. When we click on | + | 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. |
| − | [[ | + | [[File:AnimationQt.png|120x320px]] |
{{Note| This is a very basic animation in QML for beginners}} | {{Note| 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 [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below. | 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 [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below. | ||
| − | <code cpp> | + | <code cpp-qt> |
import QtQuick 1.0 | import QtQuick 1.0 | ||
Item { | Item { | ||
| Line 49: | Line 56: | ||
The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control | The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control | ||
how the value should be varied. | how the value should be varied. | ||
| − | By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle | + | By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle like this |
| − | <code cpp> | + | <code cpp-qt> |
Behavior on x { | Behavior on x { | ||
PropertyAnimation { | PropertyAnimation { | ||
| Line 79: | Line 86: | ||
==Related Articles on Animation== | ==Related Articles on Animation== | ||
| − | * | + | *[[index.php/Qt Kinetic Animations with Buttons]] |
| − | * | + | *[[index.php/Simple Animation using QML]] |
| − | * | + | *[[index.php/Twisted Carousel Animation with the Qt graphics view framework]] |
| − | * | + | *[[index.php/CS001629 - Implementing parent change animation with QML]] |
| − | * | + | *[[index.php/CS001628 - Implementing of fading animation with QML]] |
| − | * | + | *[[index.php/CS001556 - Enabling Qt Animation Framework in an application]] |
| − | + | ||
--[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]] | --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]] | ||
| + | [[Category:Code Examples]] | ||
Latest revision as of 04:16, 11 October 2012
Article Metadata
Code Example
Source file: Media:AnimationQt.zip
Tested with
Devices(s): N8
Compatibility
Platform(s): Symbian
Article
Keywords: Animation
Created: somnathbanik
(17 May 2013)
Last edited: hamishwillee
(11 Oct 2012)
Contents |
Overview
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: 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 File:AnimationQt.zip
Related Articles on Animation
- index.php/Qt Kinetic Animations with Buttons
- index.php/Simple Animation using QML
- index.php/Twisted Carousel Animation with the Qt graphics view framework
- index.php/CS001629 - Implementing parent change animation with QML
- index.php/CS001628 - Implementing of fading animation with QML
- index.php/CS001556 - Enabling Qt Animation Framework in an application
--somnathbanik 13:04, 17 May 2011 (EEST)
