QML如何为属性的每次更改设置动画？（只有最后的变化动画可见）答案

【问题标题】：QML how to animate every change of a property? (only the last change animation is visible)QML如何为属性的每次更改设置动画？（只有最后的变化动画可见）
【发布时间】：2015-10-28 09:33:11
【问题描述】：

我必须制作一个用 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)。那是我的问题。

【问题讨论】：

标签： c++ qt animation qml qtquick2

【解决方案1】：

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

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

如果此值为 true，则动画将在停止时完成其当前迭代 - 通过将 running 属性设置为 false，或通过调用 stop() 方法。

当前发生的情况是您将 9 设置为数字，这告诉动画它应该开始动画，但接下来您给出的指令是将 1 设置为数字，这告诉动画停止它在做什么，并为这个新变化注入活力。

一般来说，从 QML 处理 Qt Quick 动画更容易。

对于这个特定的用例，我还推荐PathView，因为它可能更容易实现您所追求的目标。

【讨论】：