Animate binding changes in Qt

Question

I am trying to find a way to make a transition on a QML element when the binding changes. Say you have a Text element, with a Text attribute associated with something. What I want is when the data in the binding changes, the element disappears (the old data is still displayed), it switches and disappears with the new data (the actual transition occurs until the element is displayed.)

I searched everywhere to do this, but I can figure it out. I tried using Qt Quick animations in QML, but the data itself changes before the animation starts, leaving the animation unnecessary. I tried to create a custom QDeclarativeItem object that calls the animation in QDeclarativeItem::paint() , but I cannot figure out how to start it.

I should note here that I know that my bindings work fine, as the displayed data changes, I just can't get these animations to work at the right time.

Here is what I tried with 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 } } } } 

And here is what I tried when implementing a custom 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; } } 

But, as I said, the animation that I start inside the artist never works.

Any tips? Has anyone ever done this before? I punched my head for about a week.

Answer 1

How to do this in qml only in the following ways:

• Define a custom element of your own type that behaves the way you want.
• Use this element instead of the traditional element for animation.

eg. I create a custom type "AnimatedText" to be able to fade in and out in text elements whenever the text associated with them changes.

File 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 } } 

and in your 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" } } }