Create an opacity animation in QML

Question

I have a gray rectangle with 90% opacity and I am trying to change this opacity using an animation. I've tried using OpacityAnimator but, as documentation says, The value of Item::opacity is updated after the animation has finished.

That's not what I expected, I want to make decrease the opacity during the animation, instead of changing it from 90 to 0 instantly after 2 seconds.

That's what I have:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("title")
    Rectangle{
        width: parent.width
        height: parent.height
        opacity: 90
        color: "gray"
        id: recLoading
        Text {
            id: txtLoading
            text: qsTr("Loading")
            font.bold: true
        }

        OpacityAnimator on opacity{
            from: 90
            to:0
            duration:2000
            target: parent
            running:true
        }

    }
}

DAXaholic DAXaholic · Accepted Answer · 2016-08-20T19:03:05

Try changing your opacity values to values between the range of 0 and 1 i.e.

...
Rectangle{
    width: parent.width
    height: parent.height
    opacity: 0.9
    ...

OpacityAnimator on opacity{
    from: 0.9
    to: 0.0
    duration:2000
    target: parent
    running:true
}

Create an opacity animation in QML

2 Answers