4

バインディングが変更されたときに、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;
    }
}

しかし、私が言ったように、ペインター内で開始したアニメーションは実際には起動しません。

任意のヒント？これまでにこれをやったことがある人はいますか？私はこれについて約1週間頭を悩ませてきました。

4

1 に答える 1

2

この方法だけで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"
        }
    }
}
于 2013-01-15T18:57:36.087 に答える