• QtitanRibbon| 下載試用: 遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個(gè)C ++庫，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面

Audio Visualizer 演示了如何實(shí)現(xiàn)將 Qt 3D 渲染與 Qt Quick 2D 元素結(jié)合使用的應(yīng)用程序。該示例使用媒體播放器播放音樂，并將音樂的大小可視化為動(dòng)畫條。

運(yùn)行示例

要從Qt Creator運(yùn)行示例，請打開歡迎模式并從示例中選擇示例。有關(guān)更多信息，請?jiān)L問構(gòu)建和運(yùn)行示例。

Qt 快速二維實(shí)現(xiàn)

audio-visualizer-qml/main.qml示例中的 Qt Quick ImplementationMediaPlayer用于播放音頻內(nèi)容。

MediaPlayer {
    id: mediaPlayer
    autoPlay: true
    volume: 0.5
    source: "qrc:/music/tiltshifted_lost_neon_sun.mp3"

播放器由playButton和 c{stopButton} 控制。基于單擊的按鈕state的mainview更改。

3D 內(nèi)容是使用Scene3D類型呈現(xiàn)的。Audio Visualizer 的狀態(tài)保持在mainview. 它被傳遞給visualizer酒吧動(dòng)畫所需要的。

Scene3D {
    anchors.fill: parent

    Visualizer {
        id: visualizer
        animationState: mainview.state
        numberOfBars: 120
        barRotationTimeMs: 8160 // 68 ms per bar
    }
}

Qt 3D 實(shí)現(xiàn)

該示例的 3D 元素是在audio-visualizer-qml/Visualizer.qml. 相機(jī)設(shè)置在固定位置，以從正確的角度顯示可視化條。

Camera {
    id: camera
    projectionType: CameraLens.PerspectiveProjection
    fieldOfView: 45
    aspectRatio: 1820 / 1080
    nearPlane: 0.1
    farPlane: 1000.0
    position: Qt.vector3d(0.014, 0.956, 2.178)
    upVector: Qt.vector3d(0.0, 1.0, 0.0)
    viewCenter: Qt.vector3d(0.0, 0.7, 0.0)
}

ANodeInstantiator用于創(chuàng)建可視化音樂幅度的條形。

// Bars
CuboidMesh {
    id: barMesh
    xExtent: 0.1
    yExtent: 0.1
    zExtent: 0.1
}

NodeInstantiator {
    id: collection
    property int maxCount: parent.numberOfBars
    model: maxCount

    delegate: BarEntity {
        id: cubicEntity
        entityMesh: barMesh
        rotationTimeMs: sceneRoot.barRotationTimeMs
        entityIndex: index
        entityCount: sceneRoot.numberOfBars
        entityAnimationsState: animationState
        magnitude: 0
    }
}

該visualizer還包含一個(gè)Entity顯示進(jìn)度。這個(gè)元素有一個(gè)曲線形狀的網(wǎng)格，它在一個(gè)級別上旋轉(zhuǎn)以顯示基于播放曲目的持續(xù)時(shí)間的進(jìn)度。

// Progress
Mesh {
    id: progressMesh
    source: "qrc:/meshes/progressbar.obj"
}

Transform {
    id: progressTransform
    property real defaultStartAngle: -90
    property real progressAngle: defaultStartAngle
    rotationY: progressAngle
}

Entity {
    property Material progressMaterial: PhongMaterial {
        ambient: "#80C342"
        diffuse: "black"
    }

    components: [progressMesh, progressMaterial, progressTransform]
}

在audio-visualizer-qml/BarEntity.qml有旋轉(zhuǎn)酒吧和更改欄顏色動(dòng)畫。鋼筋按照環(huán)形形式在水平面上旋轉(zhuǎn)。同時(shí)，條的顏色是動(dòng)畫的。

QQ2.NumberAnimation {
    id: angleAnimation
    target: angleTransform
    property: "barAngle"
    duration: rotationTimeMs
    loops: QQ2.Animation.Infinite
    running: true
    from: startAngle
    to: 360 + startAngle
}
QQ2.SequentialAnimation on barColor {
    id: barColorAnimations
    running: false

    QQ2.ColorAnimation {
        from: lowColor
        to: highColor
        duration: animationDuration
    }

    QQ2.PauseAnimation {
        duration: animationDuration
    }

    QQ2.ColorAnimation {
        from: highColor
        to: lowColor
        duration: animationDuration
    }
}

 每個(gè)小節(jié)的大小是從基于正在播放的曲目的單獨(dú) .raw 文件中讀取的。當(dāng)條形圍繞環(huán)旋轉(zhuǎn)時(shí)，高度會縮放以突出顯示當(dāng)前播放的位置。一整輪旋轉(zhuǎn)后，將為該條獲取一個(gè)新值。

====================================================

想要了解或購買Qt正版授權(quán)的朋友，歡迎

Qt技術(shù)交流群現(xiàn)已開通，QQ搜索群號“765444821”或者掃描下方二維碼即可加入