CODEWITHSUNDEEP
qtqml
Ismaela.D
Ismaela.D

Reputation: 57

How to show an image for few seconds in QML?

I have an image that i need to show for few seconds. How to do it in QML ?

Does anyone has an an example ?

i have this one with state but its doest not appear . I need also to make ir repetitive

     Item {
         id: myimageanimation
         x:0
         y:0
          z:2000

Image {
        id: rect
        x: 293
        y: 242
        source: "assets/ic_sound_popup_off.png"
    }


states: [
        State {
            name: "actif"
            PropertyChanges {
                target: rect
                visible:true

            }
    },
        State {
            name:"inactif"
            PropertyChanges {
                target:rect
                visible : false
            }
    }
    ]

    transitions:  [
        Transition {
            NumberAnimation {
                property: "visible"
                duration:2000
                easing.type: Easing.InOutQuad
            }
        }
    ]

Upvotes: 0

Views: 2461

Answers (1)

derM
derM

Reputation: 13691

You can use an PropertyAnimation on visible

Window {
    id: root
    visible: true
    width: 1200
    height: 1000
    Image {
        id: rect
        anchors.fill: parent
        source: 'qrc:/Pics/mypic.png'
    }

    PropertyAnimation {
        running: true
        target: rect
        property: 'visible'
        to: false
        duration: 5000 // turns to false after 5000 ms
    }
}

Or, as @ddriver mentioned, use the Timer-Object, e.g. like this:

Window {
    id: root
    visible: true
    width: 1200
    height: 1000
    Image {
        id: rect
        anchors.fill: parent
        source: 'qrc:/Pics/mypic.png'
    }

    Timer {
        interval: 5000 // triggers every 5000 ms
        onTriggered: rect.visible = false
        running: true
    }
}

You can also use the Animation to fade it away:

Window {
    id: root
    visible: true
    width: 1200
    height: 1000
    Rectangle {
        id: rect
        anchors.fill: parent
        color: 'red'
        visible: opacity > 0
    }

    SequentialAnimation {
        running: true
        PauseAnimation {
            duration: 4000 // Wait for 4000ms
        }
        NumberAnimation {
            target: rect
            property: 'opacity'
            to: 0
            duration: 1000 // Then fade away for 1000ms
        }
    }
}

With the Timer, you can use a Behavior on opacity to achive the same.

Upvotes: 4

Related Questions