API Documentation

Documentation for developing SailfishOS applications

FadeAnimation QML Type

A Sailfish-style fade animation More...

Import Statement: import Sailfish.Silica 1.0


Detailed Description

The FadeAnimation type provides a common animation for applying fade-in and fade-out animations to items. It is commonly used within a Behavior applied to an item's opacity to automatically animate opacity changes to the item in a Sailfish-styled manner.

Here is a simple example:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     property bool backgroundClicked

     MouseArea {
         anchors.fill: parent
         onClicked: backgroundClicked = !backgroundClicked

     Rectangle {
         anchors.centerIn: parent
         width: Theme.itemSizeSmall
         height: width
         color: Theme.highlightBackgroundColor
         opacity: backgroundClicked ? Theme.highlightBackgroundOpacity : 1.0

         Behavior on opacity {
             FadeAnimation {}

Note: FadeAnimator should be used instead of FadeAnimation where possible. FadeAnimator is a non-blocking variant that animates smoothly even if the main application thread has become unresponsive. FadeAnimation updates the item's opacity property every frame and can be used in bindings, whereas FadeAnimator only animates the item opacity in the render thread. In most use cases FadeAnimator is preferred.

FadeAnimation inherits the QtQuick NumberAnimation type, so any properties, signals and methods of NumberAnimation are also available to FadeAnimation objects. See the NumberAnimation documentation for its full list of available properties, signals and methods.

Property Documentation

property : string

This property holds the property that should be animated.

The default value is "opacity".

We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.