mathtrainingstuff/qml/calculator/CalculatorRunningPage.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import "./"

Page {
    id: root

    signal pageOpened()

    background: Rectangle {
        color: settings.theme("PageBackgroundColor")
    }

    Label {
        id: num
        anchors.centerIn: parent
        font.pixelSize: parent.height * 0.6
        text: calculator.nextNum
        color: settings.theme("PageTextColor")
    }

    Label {
        id: gameProcess
        text: calculator.actualNumCount + " of " + calculator.numCount
        font.pixelSize: parent.width * 0.05
        color: settings.theme("PageTextColor")
        anchors {
            right: parent.right
            rightMargin: parent.width * 0.025
            bottom: parent.bottom
            bottomMargin: parent.height * 0.05
        }
    }


    ProgressBar {
        id: prog
        property int progress: 0
        property string color: "green"
        value: progress/100
        anchors {
            bottom: parent.bottom
            bottomMargin: parent.height * 0.02
            left: parent.left
            leftMargin: parent.width * 0.01
            right: parent.right
            rightMargin: parent.width * 0.01
        }

        contentItem: Item {
            Rectangle {
                width: prog.visualPosition * parent.width
                height: parent.height
                color: prog.color
            }
        }

        NumberAnimation {
            id: progNumAnim
            target: prog
            property: "progress"
            from: 100
            to: 0
            duration: tick.interval
            easing.type: Easing.Linear
        }

        SequentialAnimation {
            id: progColAnim
            loops: 1
            ColorAnimation {
                id: progColAnim1
                target: prog
                property: "color"
                from: "green"
                to: "goldenrod"
                duration: tick.interval/2
                easing.type: Easing.Linear
            }
            ColorAnimation {
                id: progColAnim2
                target: prog
                property: "color"
                from: "goldenrod"
                to: "darkRed"
                duration: tick.interval/2
                easing.type: Easing.Linear
            }
        }

    }

    Timer {
        id: tick
        interval: calculator.tickInterval
        repeat: false
        running: calculator.state === "running"

        onTriggered: {
            if (calculator.actualNumCount < calculator.numCount) {
                nextNumber()
                tick.start()
            }
            else {
                calculator.state = "gameOver"
            }
        }

        onRunningChanged: {
            if(running){
                progNumAnim.start()
                progColAnim.start()
            }
        }
    }
}