基於 HTML5 WebGL 的樓宇智慧化整合系統（二）
tittle.setAnchor(x, y | {x:0.5,y:0.5})
此時的標題圖元就會達到錨點居中的效果：
而此時我們只需把標題的橫縮放值設定為0，而後再通過 HT 的動畫對標題縮放值進行動畫縮放，再通過動畫改變標題名字的透明度，就會達到一種面板縮放的動畫切換過渡效果。
tittle.scaleX(0);
動畫的實現主要還是通過 HT 自帶的 ht.Default.startAnim 動畫
而具體的實現虛擬碼如下：
// 標題動畫
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;
}
}
二、進度條展示效果的實現 通過封裝了一個 setValueWithAnimation 的進度條動畫，主要通過引數 (node, name, value, format)：
- 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、RTSP、HLS 和 HTTP-FLV。
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');
}
}
});
總結 IBMS 智慧化整合系統管理通過 2D 面板與 3D 場景的聯動互動中，使得整個系統內容結構更加地直觀與擬真。通過 2D 面板的事件監聽處理下，3D場景對應地執行環視漫遊、巡視漫遊以及場景的切換，使其更有具人性化的操作。再加上 3D 場景中各種有趣的動畫和 2D面板中的面板縮放動畫以及進度條動畫，豐富了視覺化操作的特點，這也是在工業網際網路必不可少的一環。 介紹完 2D/3D 融合的IBMS 智慧化整合系統場景以及面板的擬真直觀的特點後，在本系統中最重要的兩個要點：智慧樓宇管理系統、電梯監控系統 以及 停車場管理系統 將在下期的內容中為您詳細的解讀。 2019 我們也更新了數百個工業網際網路 2D/3D 視覺化案例集，在這裡你能發現許多新奇的例項，也能發掘出不一樣的工業網際網路：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA 同時，你也可以檢視更多案例及效果：https://www.hightopo.com/demos/index.ht