Animation tekst color

Darq

Is it possible to configure QML to automatically change the font size, for example, from 0 to 24 (emerging effect)? Is it also possible to automatically change the color, for example, from green to red within 3 seconds?

SGaist

Hi,

Although I haven't used these, I think you should check the QtQuick Animation example as a starting point.

Hope it helps

Darq

@SGaist I didn't find anything related to the text in the animations.

GrecKo

You can animate the font.pixelSize but it will be smoother to set a fixed pixelSize and animate the scale.

There's ColorAnimation to animate colors.

Darq

@GrecKo How do you animate scale? Can you give me an example?

Markkyboy

Hi @Darq

Have you not looked at/for any of the QML documentation online?, there's plenty to look at, but sometimes, you will not always find directly what you want.

I have linked ScaleAnimator QML docs page, it gives a Rectangle and a nested ScaleAnimator, swap out Rectangle for Text and get busy playing/experimenting, then you can add a ColorAnimation on the same block of code, so now you can scale text and change its color.

Please, for yourself, do always look for documentation as most of it gives ready to paste examples to play with.

ScaleAnimator QML ~ https://doc.qt.io/qt-6/qml-qtquick-scaleanimator.html

ColorAnimation QML ~ https://doc.qt.io/qt-6/qml-qtquick-coloranimation.html

I'll even throw in a quick code chunk you can play with, but documentation is the way to go, mostly.

Text {
        id: scalingText
        text: "READ DOCS!"
        color: "green"
        anchors.centerIn: parent
        SequentialAnimation on scale {
            loops: Animation.Infinite
            running: true
            ScaleAnimator {
                from: 2
                to: 6
                duration: 1000
                easing.type: Easing.InOutQuad
            }
            ScaleAnimator {
                from: 6
                to: 2
                duration: 1000
                easing.type: Easing.InOutQuad
            }
        }
        SequentialAnimation on color {
            loops: Animation.Infinite
            running: true
            ColorAnimation {
                to: "red"
                duration: 4000
            }
            ColorAnimation {
                to: "green"
                duration: 4000
            }
        }
    }

Good luck, it's easy when you know how!