qml 动态音频普,与计时器

import QtQuick 2.0
import QtQuick.Controls 2.12

Item {
    width: 880
    height: 664

    Rectangle {
        anchors.fill: parent
        color: "#333333"
        radius: 8

        Button {
            id: buttonStart
            x: 344
            y: 422
            width: 72
            height: 72
            text: timer.running ? "暂停" : "开始"
            onClicked: {
                if (timer.running) {
                    timer.stop();
                } else {
                    timer.start();
                }
            }
        }

        Button {
            id: buttonStop
            x: 464
            y: 422
            width: 72
            height: 72
            text: "停止"
            onClicked: {
                timer.stop();
                elapsedTime = 0;
                updateTimerText();
            }
        }

        Text {
            id: timerText
            x: 356
            y: 276
            text: "00:00:00.00"
            anchors.horizontalCenterOffset: 26
            font.pixelSize: 40
            color: "white"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 266
        }

        Text {
            id: element
            x: 356
            y: 320
            width: 168
            height: 22
            text: qsTr("正在录制...")
            font.pixelSize: 12
        }
    }

    property real elapsedTime: 0

    Timer {
        id: timer
        interval: 10
        running: false
        repeat: true
        onTriggered: {
            elapsedTime += 0.01;
            updateTimerText();
        }
    }

    function updateTimerText() {
        const minutes = Math.floor(elapsedTime / 60);
        const seconds = Math.floor(elapsedTime % 60);
        const milliseconds = Math.floor((elapsedTime % 1) * 100);

        timerText.text =
            (minutes < 10 ? "0" + minutes : minutes) + ":" +
            (seconds < 10 ? "0" + seconds : seconds) + "." +
            (milliseconds < 10 ? "0" + milliseconds : milliseconds);
    }

    Rectangle {
        id: soundWave
        x: 368
        y: 200
        anchors.centerIn: parent
        width: 230
        height: 80
        color: "transparent"
        anchors.verticalCenterOffset: -125
        anchors.horizontalCenterOffset: 40

        Row {
            anchors.rightMargin: 230
            anchors.fill: parent
            spacing: 10

            Repeater {
                model: 12

                Rectangle {
                    id: waveBar
                    width: 10
                    height: Math.random() * 60 + 20
                    color: "#FFFF4431"

                    // 动画绑定 timer.running,自动同步
                    SequentialAnimation {
                        running: timer.running
                        loops: Animation.Infinite

                        NumberAnimation {
                            target: waveBar
                            property: "height"
                            to: Math.random() * 60 + 20
                            duration: 500
                            easing.type: Easing.InOutQuad
                        }

                        NumberAnimation {
                            target: waveBar
                            property: "height"
                            to: Math.random() * 60 + 20
                            duration: 500
                            easing.type: Easing.InOutQuad
                        }
                    }
                }
            }
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值