0

我想将一些图像加载到 QML 中的 Image 对象中。我想在一个循环中一个接一个地做,我认为有一些延迟,因为它应该假装看起来像一个动画。我是 Qt 和 QML 的新手,所以有人能帮我如何开始吗?:)

4

2 回答 2

1

适用于 QML 1.x 和 2.0 的最简单的解决方案是使用 aRepeater和 a Timer

import QtQuick 2.0

Rectangle {
    id: base;
    width: 800;
    height: 600;

    property variant images : [
        "image1.jpg",
        "image2.jpg",
        "image3.jpg",
        "image4.jpg",
        "image5.jpg"
    ];
    property int currentImage : 0;

    Repeater {
        id: repeaterImg;
        model: images;
        delegate: Image {
            source: modelData;
            asynchronous: true;
            visible: (model.index === currentImage);
        }
    }

    Timer {
        id: timerAnimImg:
        interval: 500; // here is the delay between 2 images in msecs
        running: false; // stopped by default, use start() or running=true to launch
        repeat: true;
        onTriggered: {
            if (currentImage < images.length -1) {
                currentImage++; // show next image
            }
            else {
                currentImage = 0; // go back to the first image at the end
            }
        }
    }
}

应该这样做,如果您不想在到达最后一张图像时重新启动动画,只需currentImage = 0;stop();计时器的onTriggered.

此外,您可能需要稍微调整一下代理ImageRepeater使其具有您想要的外观(大小、填充模式、位置等......)。

于 2013-03-27T12:11:47.927 回答
0

如果您使用的是 QtQuick 2,那么 AnimatedSprite 是最好的方法:http: //qt-project.org/doc/qt-5.0/qtquick/qtquick-effects-sprites.html

否则,您可以使用 Timer 或 NumberAnimation 来触发更改图像源,但在第一次加载图像时可能会出现不可预知的延迟(缓存应该在第一次循环后解决这个问题)。如果您只有几张图像,则可以拥有三个图像并循环它们的可见性。

于 2013-03-22T23:31:39.690 回答