Animating on Text change

Question

Is there anything for animating text changes? there is already animations for property changes, for example this code do the animation for properties opacity, width and scale and whenever they changed by states, they will get animations.

NumberAnimation {
    properties: "opacity, width, scale, visible"
    easing.type: Easing.OutBack; duration:500
}

However i didn't find anything for text change, for example counting from N to N+1 became animating (eg. fading out old value and fading new one). how i can animating text changes?

Answer 1

For this usecase I use Behavior with a custom Animation :

//FadeAnimation.qml
import QtQuick 2.0

SequentialAnimation {
    id: root
    property QtObject target
    property string fadeProperty: "scale"
    property int fadeDuration: 150
    property alias outValue: outAnimation.to
    property alias inValue: inAnimation.to
    property alias outEasingType: outAnimation.easing.type
    property alias inEasingType: inAnimation.easing.type
    property string easingType: "Quad"
    NumberAnimation { // in the default case, fade scale to 0
        id: outAnimation
        target: root.target
        property: root.fadeProperty
        duration: root.fadeDuration
        to: 0
        easing.type: Easing["In"+root.easingType]
    }
    PropertyAction { } // actually change the property targeted by the Behavior between the 2 other animations
    NumberAnimation { // in the default case, fade scale back to 1
        id: inAnimation
        target: root.target
        property: root.fadeProperty
        duration: root.fadeDuration
        to: 1
        easing.type: Easing["Out"+root.easingType]
    }
}

Please note that it can be done without all the added properties, but I have them to enable easy customization.

An example usage could be :

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.centerIn: parent
        color: "red"
        width: 100
        height: width
        radius: width/2
        Text {
            id: textItem
            anchors.centerIn: parent
            font.pixelSize: 30
            color: "white"
            property int foo: 0
            // ### Important part ###
            text: foo
            Behavior on foo {
                FadeAnimation {
                    target: textItem
                }
            }
            // ######################
        }
        MouseArea {
            anchors.fill: parent
            onClicked: textItem.foo++
        }
    }
}

Output : https://zippy.gfycat.com/SilentImpressiveChameleon.webm

The fadeProperty is scale by default but it also works great with opacity.

---

EDIT :

I've implemented this as ready-to-use components in https://github.com/okcerg/quickbehaviors