Question

是否有动画文字更改动画？已经有属性更改的动画，例如，此代码执行属性不透明度，宽度和比例的动画，每当它们按状态更改时，它们都会获得动画。

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也适用。

Answer 2

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

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

Answer 3

我会建议类似以下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
    }
}

动画文字更改

3 个答案: