QML如何动画每个属性的变化? (只有最后一个更改动画可见)

时间:2015-10-28 09:33:12

标签: c++ qt animation qml qtquick2

我必须用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)。这是我的问题。

1 个答案:

答案 0 :(得分:0)

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

  

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

     

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

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

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

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