qt - QML:等到动画完成

Question

我正在尝试使可见动画连续。我有一个 javascript 函数，它调用 myModel.move() 两次。我有一个 GridView 来显示 myModel 并且我有“x 上的行为”动画，因此我可以直观地看到运动。但是，两个运动动画并行运行(它们之间的小延迟并不明显)。

我的想法是添加一个计数器，显示有多少动画已经开始，有多少动画已经完成。像这样的东西；

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
            }
        }
    }
}

这按预期工作。然后，我在我的 javascript 函数中添加一个循环以等待所有动画完成。

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

这是问题所在。我可以看到，在第一个 move() 之后，所有必要的动画都开始了，但什么也看不到，也没有动画完成。我有某种僵局。如何解决这个问题？

Answer 1

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

我不擅长 javascript。但是为什么要忙循环呢？我会创建 2 个函数。

第一个制作 myModel.move() ，然后为将来的事件准备该字段(例如创建将被单击的隐藏按钮)

第二个将在创建 future 事件时调用。对于上面的示例，它将是 Onclick .

看来 onRunningChanged是事件处理程序的定义。为什么不创建相同的，让我们称之为 onModelIdle喜欢

...
   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(...)
   }
}