Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Implementing of fading animation with QML

From Wiki
Jump to: navigation, search

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 (17 Oct 2012)

Contents

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.

Preconditions

  • Qt 4.7 or higher is installed on your platform.

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

Postconditions

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

This page was last modified on 17 October 2012, at 22:07.
834 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.

×