×
Namespaces

Variants
Actions
(Difference between revisions)

Basic Animation in QML

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Created page with "Category:QtCategory:Qt Quick {{CodeSnippet |id= |platform=Symbian |devices=N8 |category=QML |subcategory= UI |creationdate= 17th May, 2011 |keywords= Animation }} ...")
 
somnathbanik (Talk | contribs)
Line 1: Line 1:
 
[[Category:Qt]][[Category:Qt Quick]]
 
[[Category:Qt]][[Category:Qt Quick]]
 
 
 
{{CodeSnippet
 
{{CodeSnippet
 
|id=
 
|id=
Line 20: Line 19:
 
[[Image:AnimationQt.png]]  
 
[[Image:AnimationQt.png]]  
 
    
 
    
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 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>
 
import QtQuick 1.0
 
import QtQuick 1.0
Line 38: Line 37:
 
}
 
}
 
</code>
 
</code>
When the value of x and y changes in the [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] declaration, it means it should animate over 500 milliseconds. Till now we have done animation without easing effects.  
+
When the value of '''x''' and '''y''' changes in the [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] declaration, it means it should animate over 500 milliseconds. Till now we have done animation without easing effects.  
 
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.
Line 69: Line 68:
 
   
 
   
 
   
 
   
  Related Articles on Animation
+
  ==Related Articles on Animation==
 
* http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons  
 
* http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons  
 
* http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML   
 
* http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML   
Line 76: Line 75:
 
* http://wiki.forum.nokia.com/index.php/CS001628_-_Implementing_of_fading_animation_with_QML  
 
* http://wiki.forum.nokia.com/index.php/CS001628_-_Implementing_of_fading_animation_with_QML  
 
* http://wiki.forum.nokia.com/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
 
* http://wiki.forum.nokia.com/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
 +
 +
--[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)

Revision as of 13:04, 17 May 2011

Article Metadata
Tested with
Devices(s): N8
Compatibility
Platform(s): Symbian
Symbian
Article
Keywords: Animation
Created: (17 May 2014)
Last edited: somnathbanik (17 May 2011)

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.

AnimationQt.png

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:AnimationQML.zip


==Related Articles on Animation==

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

126 page views in the last 30 days.
×