Question

我有一个我需要显示几秒钟的图像。如何在QML中做到这一点？

有没有人有例子？

我有一个州，但它没有出现。我还需要重复

#landingimg{
    background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
    width: 960px;
    max-width:100%;
    height: 470px;
    display: table;
    background-size: cover;
    text-align: center;
}
#landingimg div h1{
    text-align: center;
    display: inline-block;
    margin: 0;
    background-color: rgba(43, 44, 44, 0.5);
    width: 400px;
    padding: 20px 0;
}
#landingimg div{
    display: table-cell;
    vertical-align: middle;
}

Answer 1

您可以在PropertyAnimation

上使用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
    }
}

或者，正如@ddriver所提到的，使用Timer-Object，例如：像这样：

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

您还可以使用动画淡化它：

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

使用计时器，您可以使用Behavior on opacity来获得相同的效果。

如何在QML中显示几秒钟的图像？

1 个答案: