QML如何动画每个属性的变化？ （只有最后一个更改动画可见）

Question

我必须用C ++控制机械计数器。我是从包含数字（0,1,2,3,4,5,6,7,8,9,0）的图像中做到的。一次只能看到一个数字。我希望这个计数器只在一个方向（向上）改变，我想出了这个理论：如果新数字小于旧数字，我首先转到最后一个零，然后禁用动画，转到第一个零，启用动画，最后转到想要的号码。但这不会奏效。 它立即移动到第一个零，然后用动画转到想要的数字。这是代码：

import QtQuick 2.4
import QtQuick.Window 2.2
Window {
    id: mainWindow
    visible: true
    visibility: "Maximized"
    property int digit0Y: 0
    property bool anim0Enabled: true
    Item {
        id: root
        visible: true
        anchors.fill: parent
        Rectangle {
            id: container
            width: 940; height:172
            anchors.centerIn: parent
            clip: true
            color: "black"
            NumberElement {
                id: digit0
                y: mainWindow.digit0Y; x: 0
                animationEnabled: anim0Enabled
            }
        }
    }
}

NumberElement.qml：

import QtQuick 2.0
Rectangle {
    id: root
    property bool animationEnabled: true
    width: 130; height: 1892
    color: "transparent"
    Behavior on y {
        enabled: root.animationEnabled
        SmoothedAnimation { velocity: 200; duration: 1500; alwaysRunToEnd: true }
    }
    Image {
        id: digits
        source: "http://s30.postimg.org/6mmsfxdb5/cifre_global.png"
    }
}

修改

#include <QQmlComponent>
#include <QGuiApplication>
#include <QThread>
#include <QQmlApplicationEngine>
#include <QQmlProperty>
#include <QDebug>

int number = 0;
int oldDigit = 0;

void set(QObject *object, int number) {
    int newDigit = number%10;
    if (newDigit < oldDigit) {
        QQmlProperty::write(object, "digit0Y", -1720);
        QQmlProperty::write(object, "anim0Enabled", false);
        QQmlProperty::write(object, "digit0Y", 0);
        QQmlProperty::write(object, "anim0Enabled", true);
    }
    QQmlProperty::write(object, "digit0Y",newDigit*(-172));
    oldDigit = newDigit;
}
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlEngine engine;
    QQmlComponent component(&engine, QUrl(QStringLiteral("qrc:/main.qml")));
    if (component.status() == QQmlComponent::Error) {
        qWarning() << component.errorString();
        return 1;
    }
    QObject *object = component.create();
    set(object, 9);
    //QThread::msleep(1000);
    set(object, 1);
    return app.exec();
}

通常一个单独的类负责设置与某些事件相关的数字，但我试图简化以演示我的问题。在上面的示例中，数字变为1，而不关心set(object, 9)。这是我的问题。

Answer 1

在开始第二个动画之前，您需要等待第一个动画完成。您可能会想，“但我将alwaysRunToEnd设置为true ...”，但这对此没有帮助：

  

此属性保持动画在停止时是否应该运行完毕。

     

如果这是真的，动画将在停止时完成当前迭代 - 通过将running属性设置为false，或者通过调用stop（）方法。

当前正在发生的事情是您将9设置为数字，它告诉动画它应该开始设置动画，但是您给出的下一条指令是将1设置为数字，告诉它动画停止它正在做的事情，并动画这个新的变化。

通常，从QML处理Qt Quick动画更容易。

我还建议PathView用于此特定用例，因为它可能更容易实现您所追求的目标。