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

Question

我想加载一些图像到QML中的Image对象。我想在循环中一个接一个地做，因为它应该假装看起来像动画。即时通讯和QML新的，所以任何人都可以帮助我如何开始或事端'？ :)

Answer 1

如果使用QtQuick 2然后AnimatedSprite是做到这一点的最好办法：http://qt-project.org/doc/qt-5.0/qtquick/qtquick-effects-sprites.html

否则，您可以使用定时器或NumberAnimation触发改变图像源，但有可能是不可预测的延误图像首次加载（缓存应在第一次循环后解决）。如果你只有几张图片，你可以有三张图片并循环观看。

Answer 2

最简单的解决方案，即在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 
      } 
     } 
    } 
} 

应该这样做，如果你不想动画重新启动时到达最后一张图像，只需在计时器的onTriggered中将currentImage = 0;替换为stop();即可。

此外，您应该可能需要调整一下Repeater中的Image代表，以使其具有您想要的外观（尺寸，填充模式，位置等）。