Cómo retrasar la acción de JavaScript dentro de QML?

Question

Estoy construyendo una aplicación C++ basada en QML.

para que sea simple:

En mi archivo principal QML, tengo un botón (Rectángulo) llamando a una función de JavaScript (definido en un archivo externo de JS) cuando se hace 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; 
    } 
} 

Como puede ver, en esta función, llamo n (= 3 aquí) tiempos otra función JS para crear dinámicamente varios QML objetos para agregar a la escena:

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

Esto funciona bien. Pero el objeto creado (símbolo) aparece en la windowApp con una animación traducción (alrededor de 1 seg.), Y me gustaría que esperar a que la animación del primer objeto que completar antes de la creación de la segunda ...

Como no puedo usar setTimeOut() función de JavaScript en QML, me pregunto cómo podría lograr esto. No veo cómo podría utilizar el objeto Timer QML o incluso PauseAnimation ...

¿Alguien sabe cómo agregar un retraso entre 2 operaciones de JavaScript QML?

Answer 1

Probablemente podría hacerlo de manera que solo cree un "Símbolo" desde la acción de su botón y active un nuevo símbolo en algún evento en el nuevo objeto. Tal vez la finalización de la animación desencadena un evento que podría usar?

Answer 2

Ha pasado un tiempo, he extrañado QML. Pero déjame intentar sugerir una solución. Supongo que esto podría funcionar, si llamas a ese translationAnimation.running = true en el evento Component.onComlpeted. He publicado una respuesta estúpida antes. Ahora lo reemplazo con una manera floja/fea de hacer esto. Probablemente esta no sea la manera correcta de hacerlo, aunque este código puede ayudar a su caso de 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 // símbolo en su 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 Creo que esto QML Timer type puede ayudarlo a lograr lo que desea.