Как загрузить кучу изображений в изображение в QML?

Question

Я хотел бы загрузить несколько изображений в объект Image в QML. Я хочу сделать это один за другим в цикле, я думаю, с некоторой задержкой, потому что он должен притворяться похожим на анимацию. Im новый в Qt и 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 
      } 
     } 
    } 
} 

Если это сделать, и если вы не хотите, чтобы анимация перезапустить, когда последнее изображение достигнуто, просто замените currentImage = 0; на stop(); в таймере onTriggered.

Кроме того, вам нужно будет немного настроить делегата Image в Repeater, чтобы он выглядел так, как хотите (размер, режим заполнения, положение и т. Д.).