QML: attendre jusqu'à ce que les animations fini

Je suis en train d'essayer de rendre visible des animations séquentielle. J'ai une fonction javascript, qui appellent monmodèle.move() deux fois. J'ai un GridView pour montrer monmodèle et j'ai "Comportement sur x" de l'animation, donc je peux voir visuellement les mouvements. Mais, à la fois mouvement animatons s'exécute en parallèle (le petit retard entre eux n'est pas perceptible).

Mon idée était d'ajouter un compteur de nombre d'animations a été commencé et combien d'entre eux déjà fini. Quelque chose comme ceci;

Behavior on x {
    NumberAnimation {
        id: animationX;
        duration: 500;
        onRunningChanged: {
            if (animationX.running) {
                console.log("Animation start");
                myModel.busy = myModel.busy + 1
            } else {
                console.log("Animation stop");
                myModel.busy = myModel.busy - 1
            }
        }
    }
}

Cela fonctionne comme prévu. Ensuite, j'ajoute une boucle de ma fonction javascript à attendre jusqu'à ce que toutes les animations fini.

ListModel {
    id: myModel
    property int busy: 0
    function doSomething() {
        myModel.move(...)
        while (myModel.busy) {}
        myModel.move(...)
    }
}

Là est le problème. Je peux voir que, après le premier move() toutes les animations ont commencé, mais rien ne peut être vu et aucun de l'animation terminée. J'ai une sorte de blocage. Comment résoudre ce problème?

OriginalL'auteur meolic | 2012-09-07

  1. 2
    function doSomething() {
    myModel.move(...)
    while (myModel.busy) {}
    myModel.move(...)
}

    Je ne suis pas bon avec javascript. Mais pourquoi avez-vous occupé en boucle? Je voudrais créer 2 fonctions.

    • La première faire myModel.move(), puis préparer le terrain pour un événement à venir (comme la création d'un bouton caché qui sera cliqué)
    • Le deuxième sera appelée lorsque l'événement est créé. Avec l'exemple ci-dessus, il sera Onclick.

    Il semble que onRunningChanged est une définition de gestionnaire d'événements. Pourquoi ne pas créer la même , permet de l'appeler onModelIdle comme 

    ...
   onRunningChanged: {
        if (animationX.running) {
            console.log("Animation start");
            myModel.busy = myModel.busy + 1
        } else {
            console.log("Animation stop");
            myModel.busy = myModel.busy - 1
            if(myModel.busy == 0)
              //don't know the code, but trigger the onModelIdle event which 
              //be handled below
        }
    }
...

ListModel {
   id: myModel
   ...

   onModelIdle{
       myModel.move(...)
   }
}
    Oui, je sais ... des questions simples produire simplifiée des réponses 🙁 En fait, je veux avoir beaucoup de différents consécutives monmodèle.déplacer(...) les appels. Cependant, votre suggestion est utilisable (voir la solution que j'ai posté ci-dessous).
    Une longue boucle n'est pas une bonne idée si vous voulez maintenir la performance.
    et où voyez-vous je dis que c'est une bonne idée?
    Nulle part, donc ajouté pour l'avenir stumblers. :} Je pourrais ajouter que dans les navigateurs, vous pouvez créer graphiquement performant boucles à l'aide de requestAnimationFrame. Qt Quick a également une version équivalente de la fonction qui, lorsqu'utilisé à bon escient pour créer des boucles conduira à de meilleures performances graphiques des animations: doc.qt.io/qt-5/... Une longue boucle dans un non-graphique thread est parfaitement bien pour croquer des nombres aussi vite que possible (plutôt que de limiter la boucle de 16ms tiques comme vous le faites avec requestAnimationFrame). Donc, cela dépend du cas d'utilisation. 🙂

    OriginalL'auteur UmNyobe

  2. 1

    Ici est une solution de travail basé sur la réponse de #UmNyobe. Eh bien, QML est un langage déclaratif et donc problématique pour itératif problèmes. Tous les commentaires sont les bienvenus. Peut-être, quelqu'un peut proposer la meilleure (plus lisible) pur QML programme qui permettra de produire le même effet.

    import QtQuick 1.1
GridView {
id: mainGrid
cellWidth: 165; cellHeight: 95
width: 5*cellWidth; height: 4*cellHeight
model: myModel
delegate: myButton
property string animate: "no"
property int busy: 0
signal busyPlus
signal busyMinus
onBusyPlus: {
busy++
}
onBusyMinus: {
busy--
if (busy == 0) mainGrid.model.algorithm()
}
ListModel {
id: myModel
property int step: 0
property int one: 0
function createModel() {
for (var i=1; i<=20; i++) {
append({"display": i})
}
}
function algorithm() {
if (step == 0) {
move(0,19,1)
one = 0
step++
}
else if (step == 1) {
if (one < 19) {
move(one,one+1,1)
one++
if (one == 19) step++
}
}
else if (step == 2) {
move(0,1,1)
move(5,6,1)
move(10,11,1)
move(15,16,1)
step++
}
}
Component.onCompleted: {
createModel()
mainGrid.animate = "yes"
algorithm()
}
}
Component {
id: myButton
Item {
id: item
width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
Rectangle {
id: box
parent: mainGrid
x: item.x; y: item.y;
width: item.width; height: item.height;
border.width: 1
Text {
anchors.centerIn: parent
text: display
font.pixelSize: 48
}
Behavior on x {
enabled: mainGrid.animate == "yes"
NumberAnimation {
id: animationX;
duration: 1000;
onRunningChanged: {
if (animationX.running) mainGrid.busyPlus()
else mainGrid.busyMinus()
}
}
}
Behavior on y {
enabled: mainGrid.animate == "yes"
NumberAnimation {
id: animationY;
duration: 1000;
onRunningChanged: {
if (animationY.running) mainGrid.busyPlus()
else mainGrid.busyMinus()
}
}
}
}
}
}
}

    OriginalL'auteur meolic