Question

我想在QML中将一些图像加载到Image对象。我想在一个循环中一个接一个地做这个，我想有一些延迟，因为它应该假装看起来像一个动画。我是Qt和QML的新手，所以任何人都可以帮助我如何开始或者某些事情？：）

Answer 1

在QML 1.x和2.0中运行的最简单的解决方案是使用Repeater和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。

此外，您可能需要调整Image中的Repeater代表，以便为其提供所需的外观（尺寸，填充模式，位置等等）。

Answer 2

如果您使用的是QtQuick 2，那么AnimatedSprite是执行此操作的最佳方式：http://qt-project.org/doc/qt-5.0/qtquick/qtquick-effects-sprites.html

否则，您可以使用Timer或NumberAnimation来触发更改图像源，但是第一次加载图像时可能会出现不可预测的延迟（缓存应该在第一次循环后解决）。如果您只有几张图像，则可以有三张图像并循环显示它们。

如何在QML中将图像堆加载到图像中？

2 个答案: