Basic Animation in QML
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData) |
||
| Line 1: | Line 1: | ||
[[Category:Qt]][[Category:Qt Quick]] | [[Category:Qt]][[Category:Qt Quick]] | ||
| − | {{ | + | {{ArticleMetaData |
|id= | |id= | ||
|platform=Symbian | |platform=Symbian | ||
| Line 8: | Line 8: | ||
|creationdate= 17th May, 2011 | |creationdate= 17th May, 2011 | ||
|keywords= Animation | |keywords= Animation | ||
| + | |||
| + | |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) --> | ||
| + | |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]] | ||
}} | }} | ||
Revision as of 12:30, 24 June 2011
Article Metadata
Tested with
Compatibility
Article
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.
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
- http://www.developer.nokia.com/Community/Wiki/index.php/Qt_Kinetic_Animations_with_Buttons
- http://www.developer.nokia.com/Community/Wiki/index.php/Simple_Animation_using_QML
- http://www.developer.nokia.com/Community/Wiki/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
- http://www.developer.nokia.com/Community/Wiki/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
--somnathbanik 13:04, 17 May 2011 (EEST)
