Come ritardare l'azione JavaScript in QML?

Question

Sto costruendo un'applicazione basata su QML.

Per farla semplice:

Nel mio file QML principale, ho un tasto (Rectangle) chiamare una funzione JavaScript (definita in un file JS esterno) quando si fa clic:

// My JS file linked to the main QML window 
[...] 
function actionOnButtonClicked() 
{ 
    var x = 0; 
    var y = 0; 
    for(var i = 0; i < 3; i++) 
    { 
     createObject(x, y); 
     x = x + 10; 
     y = y + 10; 
    } 
} 

Come si può vedere, in questa funzione, che io chiamo n (= 3 qui) volte un'altra funzione JS per creare dinamicamente diversi QML oggetti da aggiungere alla scena:

function createObject(xPosition, yPosition) 
{ 
    component = Qt.createComponent("Symbol.qml"); 
    component.createObject(windowApp, {"x": xPosition, "y": yPosition}); 
} 

Questo sta funzionando bene. Ma l'oggetto creato (Simbolo) appare nella finestraApp con un'animazione di traduzione (circa 1 sec.), E vorrei attendere il completamento dell'animazione del primo oggetto prima di creare il secondo ...

Come noi non è possibile utilizzare la funzione JavaScript setTimeOut() in QML, mi chiedo come potrei ottenere ciò. Non vedo come potrei utilizzare l'oggetto QML Timer o anche PauseAnimation ...

Qualcuno sa come aggiungere un ritardo tra 2 operazioni JavaScript QML?

Answer 1

Probabilmente si potrebbe fare in modo da creare un solo "simbolo" dall'azione del pulsante e attivare un nuovo simbolo su alcuni eventi nel nuovo oggetto. Forse la fine dell'animazione fa scattare un evento che potresti usare?

Answer 2

È da un po 'che mi manca QML. Ma lasciami provare a suggerire una soluzione. Immagino che questo potrebbe funzionare, se stai chiamando questo translationAnimation.running = true nell'evento Component.onComlpeted. Ho pubblicato una risposta stupida prima. Ora lo sostituisco con un modo pigro/brutto per farlo. Questo probabilmente non è il modo giusto per farlo, sebbene questo codice possa aiutare il tuo caso d'uso.

CreateObject.js

.pragma library 

var objects = null; 
var objectCount = 0; 
var i = 0; 
var mainWin; 
var x = 0; 
var y = 0; 

function calledOnbuttonAction(parentWindow) 
{ 
    if(objects === null) 
    { 
     mainWin = parentWindow; 
     x = 0; 
     y = 0; 
     objects = new Array(); 
     createObject(x,y); 
    } 

    else 
    { 
     if(x <= mainWin.width) 
      x = x + 28; 
     else 
     { 
      x = 0; 
      if(y <= mainWin.height) 
       y = y + 28; 
      else 
      { 
       console.debug("Exceeded window area!") 
       return; 
      } 
     } 
     createObject(x,y); 
    } 

} 

function createObject(xPos, yPos) 
{ 
    i++; 
    var component = Qt.createComponent("Object.qml"); 
    objects[objectCount++] = component.createObject(mainWin, {"x": xPos, "y": yPos}); 
} 

main.qml

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 

Rectangle { 
    id: mainWindow 
    width: 360 
    height: 360 

    Text { 
     text: qsTr("Click inside window") 
     anchors.centerIn: parent 
     font.pixelSize: 18 
    } 
    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object 
     } 
    } 

} 

Object.qml // simbolo nel tuo caso

//The Symbol 

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 
Rectangle { 

    id: obj 
    width: 25 
    height: 25 

    gradient: Gradient { 
     GradientStop { 
      position: 0 
      color: "#d11b1b" 
     } 

     GradientStop { 
      position: 1 
      color: "#ea4848" 
     } 
    } 

    property alias animationStatus: completedAnimation 

    NumberAnimation { 
     id: completedAnimation; 
     target: obj; 
     property: "opacity"; 
     duration: 800; 
     from: 0; 
     to: 1.0; 
     onRunningChanged: { 
      if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create 
      { 
       CreateObject.calledOnbuttonAction(); 
      } 
     } 
    } 

    Component.onCompleted: completedAnimation.running = true; 

} 

Answer 3

I pensa che questo QML Timer type può aiutarti a ottenere ciò che desideri.