[SailfishDevel] QML PropertyAnimation: Setting to: / from: relevant to current property value.

[christopher.lamb at thurweb.ch]

Hi All

I know this question is actually a pure QML question, but as I  
encountered it in a Sailfish migration, I am going to ask it here.to  
pick the brains of the all the Sailfish Developers.

I have a QML component  AUIPageWithMenu.qml that is an abstraction  
(wrapper) of the Silica Page component.

The declaration of AUIPageWithMenu contains a Page containing a  
ListView, and within the ListView, a Silica PushUpMenu component.

My application uses an instance of AUIPageWithMenu.qml. Let's call it  
thisPage.

When the PullUpMenu is opening, I want to gracefully fade out all the  
child elements on the instance of AUIPageWithMenu.qml i.e. all the  
child elements of thisPage.

I have achieved this using a NumberAnimation, and by adding all the  
childs to the NumberAnimation's targets property as shown in the code  
snippet below.

     NumberAnimation {
         id: fadeChilds
         properties: "opacity"
         to: 0.2
         duration: 500
     }

     onMenuOpening: {
         //called by the PullUpMenu's onActiveChanged signal
         fadeChilds.targets = setChildsToFade();
         fadeChilds.start();
     }

     function setChildsToFade() {
         var childsToFade = [];
         for(var i = 0; i < thisPage.children.length; i++) {
             if (thisPage.children[i].objectName != menuListView.objectName) {
                 childsToFade.push(thisPage.children[i])
             }
         }
         return childsToFade;
     }

While this works well so far, I would love to be able to set the  
NumberAnimation's to: / from: properties relevant to the current value  
of the opacity property of the child being animated, rather than to a  
"hard-coded" value.

If I change the properties directly, without a NumberAnimation, then I  
would do it with:

	thisPage.children[i].opacity = thisPage.children[i].opacity / 5;

If I was animating only one explicit component, then I could do it as follows:

     NumberAnimation {
         id: fadeChilds2
         target: componentX
         properties: "opacity"
         to: componentX.opacity / 5
         duration: 500
     }

But in my use case I need to animate the opacity property of list of  
unknown child components.

Any ideas of how I can achieve this?

mfg

Chris