×
Namespaces

Variants
Actions
(Difference between revisions)

Basic Animation in QML

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData)
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
 
[[Category:Qt]][[Category:Qt Quick]]
 
[[Category:Qt]][[Category:Qt Quick]]
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|id=
+
|sourcecode= [[Media:AnimationQt.zip]]
|platform=Symbian
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices=N8
+
|devices= N8
|category=QML
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|subcategory= UI
+
|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
|keywords= Animation
+
|author= [[User:Somnathbanik]]
 
+
<!-- The following are not in current metadata -->
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
+
|subcategory= UI
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
+
|sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
+
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
+
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
+
|author=[[User:Somnathbanik]]
+
 
}}
 
}}
 
    
 
    
Line 23: Line 30:
 
==Basic Idea==  
 
==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.
+
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.
 
    
 
    
[[Image:AnimationQt.png|120x320px]]  
+
[[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 like this
+
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==
  
* http://www.developer.nokia.com/Community/Wiki/index.php/Qt_Kinetic_Animations_with_Buttons
+
*[[index.php/Qt Kinetic Animations with Buttons]]
* http://www.developer.nokia.com/Community/Wiki/index.php/Simple_Animation_using_QML 
+
*[[index.php/Simple Animation using QML]] 
* http://www.developer.nokia.com/Community/Wiki/index.php/Twisted_Carousel_Animation_with_the_Qt_graphics_view_framework
+
*[[index.php/Twisted Carousel Animation with the Qt graphics view framework]]
* http://www.developer.nokia.com/Community/Wiki/index.php/CS001629_-_Implementing_parent_change_animation_with_QML 
+
*[[index.php/CS001629 - Implementing parent change animation with QML]] 
* http://www.developer.nokia.com/Community/Wiki/index.php/CS001628_-_Implementing_of_fading_animation_with_QML
+
*[[index.php/CS001628 - Implementing of fading animation with QML]]
* http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
+
*[[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:Code Examples]]

Latest revision as of 04:16, 11 October 2012

Article Metadata
Code ExampleTested with
Devices(s): N8
Compatibility
Platform(s): Symbian
Symbian
Article
Keywords: Animation
Created: somnathbanik (17 May 2014)
Last edited: hamishwillee (11 Oct 2012)

Contents

[edit] Overview

This article demonstrate how to perform basic animation in QML

[edit] 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.

AnimationQt.png

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



[edit] Source Code

The full source code presented in this article is available here File:AnimationQt.zip


[edit] Related Articles on Animation

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

This page was last modified on 11 October 2012, at 04:16.
115 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.

×