CODEWITHSUNDEEP
qtqmlqtquick2
Abdelilah El Aissaoui
Abdelilah El Aissaoui

Reputation: 5320

Create an opacity animation in QML

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
        }

    }
}

Upvotes: 2

Views: 4074

Answers (2)

jpnurmi
jpnurmi

Reputation: 5836

Opacity is specified as a number between 0.0 (fully transparent) and 1.0 (fully opaque).

http://doc.qt.io/qt-5/qml-qtquick-item.html#opacity-prop

Upvotes: 6

DAXaholic
DAXaholic

Reputation: 35338

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
}

Upvotes: 5

Related Questions