How to animate opacity (or other property) in function in QML file?

Question

I have created this function in my QML file:

function setPanelOpacity(panel, visiblePanel) {
    panel.opacity = (panel === visiblePanel) ? 1 : 0;
}

This works, but I would like to have the opacity change take 0.5 seconds instead of happening all at once. How can I do that inside this function? (I have seen examples that use states and transitions defined inside a QML object, but nothing that does this entirely within a function like my function here)

Edit: I see that I can achieve this (somewhat) by adding a Behavior to each of my panel objects, like so:

Behavior on opacity {
    NumberAnimation {
        duration: 500
        easing.type: Easing.InOutQuad
    }
}

Having to add this block to all of my objects is a bit of a pain, though. Is there any way to achieve this fully programmatically inside my method, or alternatively to apply this Behavior to every object on my page?

dtech dtech · Accepted Answer · 2016-05-06T20:07:57

QML is designed from the ground up to be a declarative language, and what you have now is the optimal solution. While it will likely be possible to animate using a functions, it will most certainly be less convenient and clean.

If the goal is to avoid code repetition, just implement the desired behavior in your own custom type, then you can instantiate it as much as you want and each instance will have the desired behavior without the need to manually implement it.

How to animate opacity (or other property) in function in QML file?

1 Answers