Y a-t-il quelque chose pour animer les modifications de texte? il y a déjà des animations pour les changements de propriété, par exemple ce code fait l'animation pour l'opacité, la largeur et l'échelle des propriétés et chaque fois qu'elles changent par états, elles obtiendront des animations.

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

Cependant, je n'ai rien trouvé pour le changement de texte, par exemple, compter de N à N + 1 est devenu animé (par exemple, effacement de l'ancienne valeur et effacement de la nouvelle). comment puis-je animer des modifications de texte?

3
e.jahandar 1 mai 2017 à 14:40

3 réponses

Meilleure réponse

Pour ce cas d'utilisation, j'utilise Behavior avec un Animation personnalisé:

//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]
    }
}

Veuillez noter que cela peut être fait sans toutes les propriétés ajoutées, mais je les ai pour permettre une personnalisation facile.

Un exemple d'utilisation pourrait être:

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

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

Le fadeProperty est scale par défaut mais il fonctionne également très bien avec opacity.

3
GrecKo 2 mai 2017 à 13:41

Je suggérerais quelque chose comme ce qui suit 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
    }
}

Peut être utilisé comme suit:

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

    NumberAnimation on progress {
        from: 0.0
        to: 1.0
        duration: 5000
    }
}
0
Ayberk Özgür 1 mai 2017 à 12:20

J'ai créé un élément personnalisé à cet effet avec une animation de fondu. Vous pouvez le modifier pour n'importe quelle animation:

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

Exemple d'utilisation:

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++;
    }
}
1
S.M.Mousavi 13 juil. 2017 à 06:18