如何在 5 秒间隔 QML 后触发图像的可见性

Question

我正在尝试为图像设置计时器，但图像需要显示 5 秒然后逐渐消失，除非它在点击时再次触发。这是我的代码：


 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


                       }

                 }

      }

我在 img2 下设置了一个计时器，但在播放视频的整个过程中图像仍然可见。单击时再次触发图像的部分最让我烦恼。任何想法将不胜感激。

编辑：我设法在 5 秒后使用 img2:

下面的 PropertyAnimation 隐藏了图像

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

我只需要在点击 5 秒后再次显示图像。这可以在 QML 中实现吗？

Answer 1

可见性只是一个布尔值，您不能那样淡化 QML 项目。你必须设置不透明度。我使用 Rectangle 而不是 Image 只是为了简单起见。在这个例子中，淡入和淡出都会发生。如果您希望图像立即出现，则需要进行一些调整。

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 } }
    }
}

Answer 2

程序启动后五秒矩形可见性：

  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 } }
  }

如何在 5 秒间隔 QML 后触发图像的可见性

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

video

image

timer

qml