產品開發玩技術很過癮!實作 QML 動畫背景!


由於最近在開發自己的產品,又開始重操舊業,開發起 Linux 系統的相關應用和嵌入式技術。為了這個產品,精心開發了一個使用者介面,除了動手把驅動程式搞定、圖形化介面搞定,也調教效能、改善系統架構。

開發自己的產品很過癮,愛怎麼搞就怎麼搞!於是,看到死板的背景覺得很不舒服,就在思考是否可以跑個動畫背景呢?

因為使用的是 QML 技術來開發 UI,最直接的想法,就是用 QtMultimedia 的 MediaPlayer 無限循環播放一個影片,當作動畫背景:
MediaPlayer {
    id: bg;
    source: 'bg.mov';
    loops: MediaPlayer.Infinite;
    autoPlay: true;
}

VideoOutput {
    anchors.fill: parent;
    source: bg;
}

當然,我們選擇的背景影片,是一個開頭跟結尾一樣的影片,如果正確循環播放,會無縫接軌的變成一個順暢的動畫背景。

然而,結果不如預期,碰到了一個問題,那就是每當背景影片播放到最後時,會畫面變成全黑,然後才再一次重新開始播放,沒辦法「無縫接軌」。仔細暸解以後,發現 MediaPlayer 元件是 QMediaPlayer 的 QML Type 實作,所有秘密都藏在 QMediaPlayer 之中。因為 QMediaPlayer 預設所有的通知事件,都是固定以 1000ms(1秒)的頻率來觸發,這代表,當 QML 元件發現影片播完時,通常已經是播完以後的事了,所以畫面一定會因為影片結束而變黑,然後 QML 元件才發現影片結束,重新進行播放。

知道緣由後,我們可以從事件更新頻率下手,讓 QML 元件發現影片播完的時間更接近實際影片結束的時間,但這必須動用到 C/C++ 的實作,因為 QMediaPlayer 的事件更新頻率無法以純 QML 的方法修改。

C/C++ 完整應用程式的實作如下,我們把更新頻率調高為每 100ms 一次:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>
#include <QMediaObject>
#include <QMediaPlayer>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/resources/App.qml")));

    // Getting background component by using background objectName
    QObject *obj = static_cast<QObject *>(engine.rootObjects().first());
    QObject *background = obj->findChild<QObject *>("background");

    // Set NotifyInterval to 100ms
    QMediaPlayer *player = qvariant_cast<QMediaPlayer *>(background->property("mediaObject"));
    player->setNotifyInterval(100);

    return app.exec();
}

除此之外,為了可以順利取得 QML 中的 MediaPlayer 元件,我們需要幫其設定一個「objectName」作為識別,讓 C/C++ 這的原生程式可以搜尋的到該元件:
MediaPlayer {
    id: bg;
    objectName: 'background';
    source: 'bg.mov';
    loops: MediaPlayer.Infinite;
    autoPlay: true;
}

雖然我們縮短了每次更新的間隔時間,調到了 100ms,已經非常接近了影片結束時間,但仍然可能會發生問題。所以保險起見,我們可以多做些檢查工作,在影片結束前 100ms 左右時,就讓他重頭開始播放一次影片。
MediaPlayer {
    id: bg;
    objectName: 'background';
    source: 'bg.mov';
    loops: MediaPlayer.Infinite;
    autoPlay: true;

    onPositionChanged: {
        if (position >= duration - 100) {
            bg.seek(0);
        }
    }
}

理論上,這樣做會損失不到 100ms 長度的動畫,但人通常感覺不出來這麼短的損失,而且是前方還有 UI 介面的情況之下。但如果你仍然有感,可以考慮把頻率改為 50ms 或更少。

最後就可以享受會動的背景啦!

這個網誌中的熱門文章

Web 技術中的 Session 是什麼?

NodeJS 與 MongoDB 的邂逅

淺談 USB 通訊架構之定義(一)

淺談 USB 通訊架構之定義(二)

Koa 2 起手式!