Qt中的動畫綁定更改

Question

當綁定更改時，我試圖找到一種在QML元素上進行過渡的方法。 假設您有一個Text元素，並且text屬性綁定到了某個東西。 我想要的是，當綁定中的數據發生變化時，元素淡出（仍然顯示舊數據），切換並隨新數據淡入（實際過渡在元素不可見時發生）。

我一直在到處尋找實現此目的的方法，但我可以弄清楚。 我嘗試在QML中使用Qt Quick動畫，但是數據本身在動畫運行之前會發生變化，從而使動畫變得不必要。 我嘗試創建一個自定義QDeclarativeItem對象，該對象在QDeclarativeItem::paint()內調用動畫，但我不知道如何使它真正運行。

我應該在這里注意，我知道綁定隨着顯示的數據更改而工作正常，只是無法讓這些動畫在適當的時間運行。

這是我嘗試使用QML進行的操作：

Text {
    id: focusText
    text: somedata

    Behavior on text {
         SequentialAnimation {
             NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 500 }
             NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 500 }
         }
     }
}

這是我嘗試實現自定義QDeclarativeItem ：

// PAINTER
void AnimatedBinding::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {
    // Setup the pen
    QPen pen(m_color, 2);
    painter->setPen(pen);
    painter->setOpacity(this->opacity());

    // Draw the item
    if (m_bindingType == QString("text")) {
        QPropertyAnimation animation(this, "opacity");
        animation.setDuration(1000);
        animation.setStartValue(1);

        if (drawn) {
            animation.setStartValue(1);
            animation.setEndValue(0);
            animation.start();
        } else drawn = true;

        painter->drawText(boundingRect(), m_data.toString());
        animation.setEndValue(0);
        animation.start();
    } else {
        qCritical() << "Error unknown binding type!";
        return;
    }
}

但是就像我說的那樣，我在畫家內開始的動畫實際上從未觸發過。

有小費嗎？ 有人做過嗎？ 我已經為此努力了大約一個星期。

Answer 1

僅通過這種方式在qml中進行操作：

1. 定義自己的類型的自定義元素，該元素的行為與您希望的一樣。
2. 使用此元素代替傳統元素進行動畫處理。

例如。 我創建了一個自定義的'AnimatedText'類型，以使每當與文本元素相關的文本發生更改時，就可以對文本元素進行淡入淡出行為。

文件1：AnimatedText.qml

import QtQuick 1.0

Item
{
    id: topParent
    property string aText: ""
    property string aTextColor: "black"
    property int aTextFontSize: 10
    property int aTextAnimationTime : 1000

    Behavior on opacity { NumberAnimation { duration: aTextAnimationTime } }

    onATextChanged:
    {
         topParent.opacity = 0
         junkTimer.running = true
    }

    Timer
    {
       id: junkTimer
       running: false
       repeat: false
       interval: aTextAnimationTime
       onTriggered:
       {
           junkText.text = aText
           topParent.opacity = 1
       }
    }

    Text
    {
        id: junkText
        anchors.centerIn: parent
        text: ""
        font.pixelSize: aTextFontSize
        color: aTextColor
    }
}

並在您的main.qml中

import QtQuick 1.0

Rectangle
{
    id: topParent
    width:  360
    height: 360

    AnimatedText
    {
      id: someText

      anchors.centerIn: parent
      aText: "Click Me to change!!!.."
      aTextFontSize: 25
      aTextColor: "green"
      aTextAnimationTime: 500
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            someText.aText = "Some random junk"
        }
    }
}