如何將一堆圖像加載到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代表，以使其具有您想要的外觀（尺寸，填充模式，位置等）。