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

[christopher . lamb]

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

_______________________________________________
SailfishOS.org Devel mailing list