How to trigger visibility of an image on click after 5 seconds interval QML

Question

I'm trying to set a timer for an image, however the image needs to be visible for 5 seconds and then fade away unless it is triggered again on a click. Here's my code:

 Video{
                 id:video
                 //width:500
                 //height:300
                 //anchors.left:parent
                 autoLoad: true
                 autoPlay: true
                 //hasVideo: true
                 //source:"http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/0640_vod.m3u8"
                 width:isFullScreen?1080:500
                 height:isFullScreen?1060:300


                 Image{
                     id:img1
                     width:parent.width/5
                     height:parent.height/5
                     anchors.centerIn: parent
                     source:'qrc:play-circle-outline.svg'
                     property int duration:5000




                     MouseArea{
                        anchors.fill:parent
                        onClicked:{
                            if(video.playbackState===1){
                                  video.pause()
                                  img1.source='qrc:play-circle-outline.svg'
                                }else if(video.playbackState===2){
                                  video.play()
                                  img1.source='qrc:pause-outline.svg'

                               }
                          }
                       }

                   }

                 Image{
                     id:img2
                     width:parent.width/5
                     height:parent.height/5
                     anchors.bottom:video.bottom
                     anchors.right:video.right
                     source: isFullScreen? 'qrc:enter-outline.svg':'qrc:exit-outline.svg'

                     Timer {
                            interval: 5000
                            onTriggered: img2.visible = true
                            running: false

                        }



                     MouseArea{
                        anchors.fill:parent
                       /* onClicked:{
                              if(isFullScreen){
                                  video.height=300
                                  video.width=500
                                  img2.source='qrc:exit-outline.svg'
                                }else{
                                  video.height=1060
                                  video.width=1080/2
                                  img2='qrc:enter-outline.svg'
                               }
                          }*/

                          onClicked:isFullScreen=!isFullScreen


                       }

                 }

      }

I set a timer under img2 but the image is still visible for the whole time of playing the video. The part of the image being triggered again on a click troubles me the most. Any idea would be appreciated.

Edit: I managed to hide the image after 5 seconds using PropertyAnimation below img2:

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

I only need for the image to be visible again on click for 5 seconds. Is this possible to achieve in QML?

Answer 1

five seconds rectangle visibility after program start:

  Timer{
    id:startTimer
    interval: 1000
    running: true
}


Rectangle{
    id: startRect
    y:510
    x:410
    width: 130
    height: 40
    color: "black"

    Text {
        id: startText
        text: qsTr("Start")
        anchors.centerIn: startRect
        color: "#fcb692"
        font.bold: true
         font.family: "Helvetica"
         font.pointSize: 24
    }

    opacity: startTimer.running ? 0.0 : 1.0
    Behavior on opacity { PropertyAnimation { duration: 5000 } }
  }

Answer 2

Visibility is just a boolean, you can't fade QML items that way. You have to set the opacity. I'm using a Rectangle instead of an Image just to keep things simple. In this example both fade-in and fade-out will happen. If you want the image to appear immediately, then a little bit of tweaking needed.

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle
{
    id: bg
    anchors.fill: parent
    color: "red"

    Timer {
        id: tmr
        interval: 5000
    }

    Button {
        z: img.z+1
        anchors.centerIn: parent
        text: tmr.running ? "Running" : "Start timer"
        onClicked: {
            tmr.stop()
            tmr.start()
        }
    }

    Rectangle {
        id: img
        width: 200
        height: 200
        anchors.centerIn: parent
        opacity: tmr.running ? 1.0 : 0.0
        Behavior on opacity { PropertyAnimation { duration: 1000 } }
    }
}