Can I do this Animation in Qt

? Offline

hello, can you give a tip or an example on how to make a counter with animation in the video using Qt quick and with the help of animations?

https://youtu.be/dImb9e35QPg?t=449

SGaist

Hi,

Do you mean a counter that increments and update the value shown at each step several times a second ?

? Offline

@SGaist said in Can I do this Animation in Qt:

Hi,

Do you mean a counter that increments and update the value shown at each step several times a second ?

yes i want something exactly like this

SGaist

You can start from the Timer item example.

? Offline

@SGaist So how can I apply the animation?

SGaist

Define the animation because there was just a counter incrementing fast.

? Offline

@SGaist

Label {
    id: moduleSize
    property int currentValue: 0

    PropertyAnimation {
        id: propertyAnimation
        target: moduleSize
        properties: "text"
        to: moduleSize.currentValue
        duration: 10
    }

    Timer {
        id: animationTimer
        interval: 10
        repeat: true
        onTriggered: {
            if(moduleSize.currentValue < count) {
                moduleSize.currentValue++
                propertyAnimation.start()
            }
        }
    }
    Component.onCompleted: {
        animationTimer.start()
    }
}

this worked well for me. I wasn't sure if I was using it correctly. If the count value taken as a parameter is a large number, the animation is completed in about 10 seconds.

freedbrt

I think the best way is to use behavior

import QtQuick 2.15
import QtQuick.Window 2.15

Window {   
    width: 640
    height: 480
    visible: true

    Timer { // Example Timer
        interval: 16
        running: true
        repeat: true
        onTriggered: {
            moduleSize.currentValue += Math.random() * 100
        }
    }
    
    Text {
        id: moduleSize

        anchors.centerIn: parent

        property int currentValue: 0

        Behavior on currentValue {
            NumberAnimation { duration: 16 }
        }

        text: currentValue
    }
}

haiku

@NullByte see here for a live example that increments the counter to random number every time you click the button.

And here's the code: https://gist.github.com/ollie-dawes/bbf5660804f2f3304d9e192849e12360

? Offline

@haiku Nice, thanks for sharing.