產品開發玩技術很過癮！實作 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 或更少。

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