文本更改动画

Question

是否有任何动画文本更改的功能？已经有属性变化的动画，例如这段代码为属性 opacity、width 和 scale 做动画，每当它们被状态改变时，它们都会得到动画。

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

但是我没有发现任何文本更改，例如从 N 计数到 N+1 变成动画（例如，淡出旧值并淡出新值）。如何为文本更改设置动画？

Answer 1

对于这个用例，我使用 Behavior 和自定义 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]
    }
}

请注意，它可以在不添加所有属性的情况下完成，但我有它们可以轻松自定义。

一个示例用法可能是：

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

输出：https://zippy.gfycat.com/SilentImpressiveChameleon.webm

fadeProperty 默认为scale，但它也适用于opacity。

---

编辑：

我已在https://github.com/okcerg/quickbehaviors 中将其实现为即用型组件

Answer 2

我会建议类似以下AnimatedText.qml：

import QtQuick 2.5

Item{
    property real progress: 0.0
    property string text0
    property string text1

    Text{
        text: text0
        opacity: 1.0 - progress
    }
    Text{
        text: text1
        opacity: progress
    }
}

可以如下使用：

AnimatedText{
    text0: "First text"
    text1: "Second text"

    NumberAnimation on progress {
        from: 0.0
        to: 1.0
        duration: 5000
    }
}

Answer 3

为此，我使用淡入淡出动画创建了一个自定义项目。您可以为任何动画编辑它：

AnimatedText.qml

import QtQuick 2.7

Item {
    id: root
    width: Math.max(txt1.width, txt2.width);
    height: Math.max(txt1.height, txt2.height);
    property string text: ""
    property int currentActiveTxt: 1
    property real pointSize: 20
    Text {
        id: txt1
        font { pointSize: root.pointSize }
    }
    Text {
        id: txt2
        font { pointSize: root.pointSize }
    }

    onTextChanged: {
        if(currentActiveTxt == 1) {
            txt2.text = root.text;
            currentActiveTxt = 2;
            root.state = "txt2 is active";
        } else {
            txt1.text = root.text;
            currentActiveTxt = 1;
            root.state = "txt1 is active";
        }
    }

    states: [
        State {
            name: "txt1 is active"
            PropertyChanges {
                target: txt1
                opacity: 1.0
            }
            PropertyChanges {
                target: txt2
                opacity: 0.0
            }
        },
        State {
            name: "txt2 is active"
            PropertyChanges {
                target: txt1
                opacity: 0.0
            }
            PropertyChanges {
                target: txt2
                opacity: 1.0
            }
        }
    ]
    state: "txt1 is active"
    transitions: [
        Transition {
            from: "txt1 is active"
            to: "txt2 is active"
            NumberAnimation {
                property: "opacity"
                duration: 200
            }
        },
        Transition {
            from: "txt2 is active"
            to: "txt1 is active"
            NumberAnimation {
                property: "opacity"
                duration: 200
            }
        }
    ]
}

示例用法：

Window {
    id:root
    visible: true
    width: 340
    height: 480
    title: qsTr("Hello World")

    AnimatedText {
        id: txt
        pointSize: 30
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        text: ":)"

    }

    Timer {
        interval: 1000
        running: true
        repeat: true
        property int i: 0
        onTriggered: txt.text = i++;
    }
}