×
Namespaces

Variants
Actions
(Difference between revisions)

Implementing of fading animation with QML

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Improve categories)
 
Line 1: Line 1:
 +
[[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:UI]][[Category:S60 5th Edition]][[Category:Code Snippet]]
 +
{{Abstract|This code snippet shows how to implement a fading animation with QML.}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
Line 21: Line 23:
 
|author= [[User:Kratsan]]
 
|author= [[User:Kratsan]]
 
<!-- The following are not in current metadata -->
 
<!-- The following are not in current metadata -->
|subcategory= Qt Quick
 
 
|id= CS001628
 
|id= CS001628
 
}}
 
}}
  
 
==Overview==
 
==Overview==
 
This code snippet shows how to implement a fading animation with QML.
 
  
 
In the following QML code there are four ways to implement the fading of a {{Icode|Rectangle}} element using {{Icode|PropertyAnimation}} when the rectangles are clicked. Different implementations suit different purposes, so use the most suitable one.
 
In the following QML code there are four ways to implement the fading of a {{Icode|Rectangle}} element using {{Icode|PropertyAnimation}} when the rectangles are clicked. Different implementations suit different purposes, so use the most suitable one.
Line 115: Line 114:
  
 
The code snippet demonstrated four different ways to implement a fading animation with {{Icode|PropertyAnimation}}.
 
The code snippet demonstrated four different ways to implement a fading animation with {{Icode|PropertyAnimation}}.
 
[[Category:Qt]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
 

Latest revision as of 01:07, 18 October 2012

This code snippet shows how to implement a fading animation with QML.

Article Metadata
Tested with
Devices(s): Nokia 900
Compatibility
Platform(s): S60 5th Edition
Maemo
Symbian
S60 5th Edition
Article
Keywords: QML, PropertyAnimation
Created: kratsan (18 Jun 2010)
Last edited: hamishwillee (18 Oct 2012)

Contents

[edit] Overview

In the following QML code there are four ways to implement the fading of a Rectangle element using PropertyAnimation when the rectangles are clicked. Different implementations suit different purposes, so use the most suitable one.

The code snippet is meant to be run with qmlviewer.

[edit] Preconditions

  • Qt 4.7 or higher is installed on your platform.

[edit] Source

ui.qml

import Qt 4.7
 
Rectangle {
width: 640; height: 480
color: "black"
 
Row {
anchors.centerIn: parent; spacing: 10
 
// Implements fading using Behavior
Rectangle {
id: fadingByBehavior
 
width: 100; height: 100; color: "red"
Behavior on opacity { PropertyAnimation { duration: 1000 } }
 
MouseArea { anchors.fill: parent; onClicked: fadingByBehavior.opacity = 0.2 }
}
 
 
// Implements fading using States and Transitions
Rectangle {
id: fadingByState
 
width: 100; height: 100; color: "green"
 
MouseArea { anchors.fill: parent; onClicked: fadingByState.state = "hidden" }
 
states: State { name: "hidden"; PropertyChanges { target: fadingByState; opacity: 0.2 } }
 
transitions: Transition {
from: "*"
to: "hidden"
PropertyAnimation { target: fadingByState; property: "opacity"; duration: 1000 }
}
}
 
 
// Implements fading using animation as an element
Rectangle {
id: fadingByAnimationElement
 
width: 100; height: 100; color: "blue"
 
MouseArea { anchors.fill: parent; onClicked: hideAnimation.start() }
 
PropertyAnimation {
id: hideAnimation
target: fadingByAnimationElement; property: "opacity"; to: 0.2; duration: 1000
}
}
 
 
// Implements fading directly from the event handler
Rectangle {
id: fadingFromSignalHandler
 
width: 100; height: 100; color: "yellow"
 
MouseArea {
anchors.fill: parent
onClicked: PropertyAnimation {
target: fadingFromSignalHandler; property: "opacity"; to: 0.2; duration: 1000
}
}
}
}
}

[edit] Postconditions

The code snippet demonstrated four different ways to implement a fading animation with PropertyAnimation.

This page was last modified on 18 October 2012, at 01:07.
299 page views in the last 30 days.
×