基於 HTML5 WebGL 的樓宇智能化集成系統（二）
- 2020 年 4 月 9 日
- 筆記
tittle.setAnchor(x, y | {x:0.5,y:0.5})
此時的標題圖元就會達到錨點居中的效果：
而此時我們只需把標題的橫縮放值設置為0，而後再通過 HT 的動畫對標題縮放值進行動畫縮放，再通過動畫改變標題名字的透明度，就會達到一種面板縮放的動畫切換過渡效果。
tittle.scaleX(0);
動畫的實現主要還是通過 HT 自帶的 ht.Default.startAnim 動畫函數，支持 Frame-Based 和 Time-Based 兩種方式的動畫。這裡的實現採用了 Time-Based 的動畫方式，當中的 esting 參數是用於讓用戶定義函數，通過數學公式控制動畫， 如勻速變化、先慢後快等效果，可參考http://easings.net/，本案例是採用的先慢後快的實現方式。
而具體的實現偽代碼如下：
// 標題動畫 tittleAnim() { const self = this; const g2d = self.g2d; const g2dDm = g2d.dm(); // 獲取標題圖元的橫縮放值 let tittle_index = this.tittle.getScaleX(); // 縮放值動畫執行入口 ht.Default.startAnim({ // 動畫時間 duration: 300, // 調用 Easing.js 裏面 swing 的動畫效果 easing: Easing.swing, // 動畫執行內容 action: (v, t) => { // 通過修改標題橫縮放值來實現動畫效果 this.tittle.setScaleX(tittle_index + (1 - tittle_index) * v); }, finishFunc: () => { // 縮放值動畫結束後執行標題名字透明度漸變顯示動畫 ht.Default.startAnim({ duration: 1000, easing: Easing.swing, action: (v, t) => { // 通過修改標題名字透明度來實現動畫效果 this.tittleName.eachChild(c => { c.s('opacity', c.s('opacity') + (1 - c.s('opacity')) * v); }); }, finishFunc: () => { // 結束後調用執行下一個縮放值動畫以及字體透明度動畫 } }); } }); }
Easing.js 是自己封裝的動畫效果，如 swing 是由慢到快的擺動動畫效果：
const Easing = { swing: function (t) { return ( -Math.cos(t * PI) / 2 ) + 0.5; } }
- node：為進度條圖元結點；
- name：傳入的參數為進度條圖元結點的屬性名，一般為需要改變的進度值 precent, 取值範圍為0~1；
- value：根據傳入的 name, 去改變對應的數值；
- format：如有格式，則可改變新數值的格式；
主要的實現方法還是採用 HT 的 ht.Default.startAnim 動畫函數，來實現新值 newValue 與舊值 oldValue 的差額range 動畫實現。
setValueWithAnimation(node, name, value, format) { let oldValue = node.a(name); value *= 1; let range = value - oldValue; ht.Default.startAnim({ duration: 1000, easing: Easing.easeOutStrong, action: (v, t) => { let newValue = oldValue + range * v; if (format) { newValue = format(newValue); } node.a(name, newValue); } }); }
同樣的，這裡的動畫效果也是引用 Easing.js 里 easeOutStrong 逐漸加快的效果：
const Easing = { easeOutStrong: function (t) { return 1 - (--t) * t * t * t; } }
RTMP (Real Time Messaging Protocol)：實時消息傳輸協議，RTMP 協議中，視頻必須是 H264 編碼，音頻必須是 AAC 或 MP3 編碼，且多以 flv 格式封包。因為 RTMP 協議傳輸的基本是 FLV 格式的流文件，必須使用 flash 播放器才能播放。
RTSP (Real-Time Stream Protocol)：RTSP 實時效果非常好，適合視頻聊天、視頻監控等方向。
HLS(Http Live Streaming)：由 Apple 公司定義的基於 HTTP 的流媒體實時傳輸協議。傳輸內容包括兩部分：1.M3U8 描述文件，2.TS 媒體文件。TS 媒體文件中的視頻必須是H264編碼，音頻必須是 AAC 或 MP3 編碼。數據通過 HTTP 協議傳輸。目前 video.js 庫支持該格式文件的播放。
HTTP-FLV：本協議就是 http+flv，將音視頻數據封裝成FLV格式，然後通過http協議傳輸到客戶端，這個協議大大方便了瀏覽器客戶端播放直播視頻流.目前 flv.js 庫支持該格式的文件播放。
本實例中實現方式主要是雙擊 3D 場景中攝像機，彈出監控彈窗再載入本地資源的視頻文件，而在實際應用項目場景中，我們可以靈活合理地運用以上的常用的流媒體傳輸協議來實現實時監控的效果。為了處理點擊事件的交互，這裡添加事件交互監聽 mi 為 addInteractorListener的縮寫，可了解 HT 交互監聽的實現方式。
g3d.mi(e => { const kind = e.kind; // 雙擊結點的事件處理 if (kind === 'doubleClickData') { // 雙擊的結點 let data = e.data; // 獲取雙擊結點的標籤 let tag = data.getTag(); if (!tag) return; // 如果結點標籤為監控器 if (tag === 'monitor') { // 監控面板顯示 this.intelligentMonitoring.s('2d.visible', true); // 載入本地資源視頻流 this.video.a('videoURL', './storage/assets/media/video.mp4'); } } });
