在圖撲 HT 項目中，尤其是復雜應用里，單一場景或圖紙通常難以承載所有需求，因此在多個圖紙或場景之間進行切換是一種常見的實現(xiàn)方式。本文將深入解析圖撲 HT 項目中場景/圖紙切換的核心實現(xiàn)方法，并詳細介紹如何為切換過程添加流暢自然的過渡效果，以提升用戶體驗。

場景 / 圖紙核心切換步驟

圖撲 HT 項目中，實現(xiàn)圖紙或場景的無縫切換需嚴格遵循以下關鍵步驟，以避免潛在問題并確保切換過程穩(wěn)定可靠：

1. 清除當前的數(shù)據(jù)模型
2. 使用 dataModel.clear() 清除當前場景關聯(lián)的所有數(shù)據(jù)模型。
3. 反序列化新場景/圖紙
4. 通過 view.deserialize(url) 方法加載并反序列化新的場景或圖紙資源文件，完成新場景的載入。

注意：不建議通過創(chuàng)建多個 ht.graph3d.GraphView 進行切換。

原因在于 ht.graph3d.GraphView 是基于 WebGL 的 3D 渲染組件。而多數(shù)瀏覽器對單個頁面可運行的 WebGL 上下文數(shù)量有嚴格限制。頻繁創(chuàng)建新實例會導致內存泄漏或資源耗盡，引發(fā)場景顯示異常甚至瀏覽器崩潰。

場景切換過渡效果

為了在場景切換時獲得更流暢、更具視覺吸引力的體驗，可以添加過渡動畫。常見的實現(xiàn)思路有兩種：

利用場景屬性實現(xiàn)過渡

通過控制場景的特定屬性，在切換過程中產生動態(tài)過渡效果，常見的有景深動畫和亮度調節(jié)等。

景深動畫過渡

景深效果主要通過以下兩個屬性控制：

• image 屬性：模擬景深的貼圖（通常為四周黑色、中間透明的 PNG 圖片，黑色區(qū)域應用景深模糊，透明區(qū)域保持清晰）。
• aperture（孔徑）屬性：代表中間空白區(qū)域的大小，取值范圍 0~1，0 表示無景深效果，1 表示景深效果最明顯。

實現(xiàn)步驟

使用一張全黑景深貼圖（確保整個場景受景深影響），在舊場景切換前開啟景深并執(zhí)行遞增孔徑值的動畫，新場景加載后執(zhí)行遞減孔徑值的動畫，形成“漸隱漸顯”的過渡效果。

let dof = g3d.getPostProcessingModule('Dof');
dof.image = 'assets/景深.png'
dof.aperture = 0
// 景深開啟
g3d.enablePostProcessing('Dof', true);
let anim = {
      duration: 800,
      easing: (t: number) => {
         return t * t;
      },
      action: (v: number, t: number) => {
        // 動態(tài)設置景深閾值
        dof.aperture = v * 0.2
        }
}
ht.Default.startAnim(anim);

新場景反序列化后，新場景也需要執(zhí)行景深動畫。這時執(zhí)行的景深動畫跟舊場景的景深動畫區(qū)別在于 action 中的邏輯是遞減的過程：dof.aperture =0.2-v*0.2。

其他屬性過渡效果

除景深外，還可通過調節(jié)亮度等場景屬性實現(xiàn)過渡，原理與景深動畫一致：

• 舊場景切換前，執(zhí)行屬性動畫（如亮度逐漸降低至 0，場景變暗）；
• 新場景加載后，執(zhí)行反向動畫（如亮度從 0 逐漸恢復至正常值，場景變亮）。

利用 2D 圖紙動畫實現(xiàn)過渡

通過在 3D 場景上層疊加 2D 圖紙，利用 2D 元素的動畫效果遮蔽切換過程，創(chuàng)意自由度更高，為整體呈現(xiàn)帶來了更多的藝術動感和技術深度。

幀動畫過渡（云朵過渡）

舊場景被“云朵”圖片序列逐漸覆蓋（遮蔽），切換新場景后，“云朵”再逐漸消散以展現(xiàn)新場景。

實現(xiàn)步驟

1. 準備一組連續(xù)的過渡圖片（如從透明到完全遮蔽再到透明的云朵圖片序列）；
2. 舊場景切換前，執(zhí)行動畫使圖片從初始狀態(tài)過渡到完全遮蔽場景；
3. 新場景加載后，執(zhí)行反向動畫使圖片從完全遮蔽過渡到消失。

代碼示例

const cloudList = [    
    "assets/cloud1.png",
    "assets/cloud2.png",
    ...
    "assets/cloud20.png",
];
const image = this.getDataByTag('cloud');
let i = 0；
ht.Default.startAnim({
    frames: 20,
    interval:50,
    action: (t) => {
        cloudList[i] && image.setImage(cloudList[i]);
    }
})

在新舊場景內執(zhí)行的動畫代碼基本一樣，區(qū)別在于切換前 action 中是從第一張圖片切換到最后一張，在新場景反序列化后是從最后一張切換回第一張。

其他創(chuàng)意效果

利用 2D 覆蓋層進行過渡的核心優(yōu)勢在于創(chuàng)意自由度極高。開發(fā)者可以結合 HT 強大的 2D 動畫能力，對覆蓋元素應用多種屬性動畫組合：

• 漸入漸出的遮罩層動畫；
• 模擬鏡頭推拉的縮放動畫；
• 基于路徑的元素移動動畫；
• ……

2D 圖紙間切換過渡

前文主要探討了 3D 場景的切換過渡。同樣地，在純 2D 圖紙 (ht.graph.GraphView) 之間進行切換時，也可以利用 HT 的 2D 特性實現(xiàn)平滑的過渡效果。一種實用的方法是動態(tài)生成并動畫化當前視圖的縮略圖。

利用縮略圖過渡

在圖紙切換前動態(tài)生成縮略圖并施加動畫，實現(xiàn)平滑過渡的效果，具體的實現(xiàn)步驟：

■生成當前視圖縮略圖：在觸發(fā)圖紙切換前，使用 gv.toDataURL() 生成當前視圖的縮略圖。

■創(chuàng)建過渡節(jié)點：

生成與圖紙視圖窗口尺寸相同的節(jié)點。

將縮略圖設置為該節(jié)點的內容。

■應用動畫效果：在動畫中調整縮略圖節(jié)點的裁切、透明等屬性，以達到過渡效果。

代碼示例

functiongenerateThumbnail() {
     var jsonSerializer = new ht.JSONSerializer(dm); // 創(chuàng)建序列化器，并傳入舊圖紙的 dm
     jsonSerializer.isSerializable = function (data) { // 過濾節(jié)點
         return data.getTag() != 'mask';
     }
     var json = ht.Default.parse(jsonSerializer.serialize()); 
     json.a = {};
     const gv = new ht.graph.GraphView(); // 創(chuàng)建一個新的2D 視圖
     gv.dm().deserialize(json); // 反序列化


     const thumbnail = gv.toDataURL(null, null, 1, 0); // 生成縮略圖
}
functioncreateThumbnailData(thumbnail){
     const thumbnail_data = new ht.Node(); // 生成縮略圖節(jié)點
     thumbnail_data.setImage(thumbnail);
     const contentRect = gv.getContentRect(); // 獲取所有圖元占用的矩形區(qū)域
     const rect = div.getBoundingClientRect();// 獲取2D視圖尺寸
     const width = rect.width;
     const height = rect.height;
     thumbnail_data.p({ x: contentRect.x + contentRect.width / 2, y: contentRect.y + contentRect.height / 2 }) // 為縮略圖節(jié)點設置位置
     thumbnail_data.setSize({ width, height });// 為縮略圖節(jié)點設置尺寸
     thumbnail_data.setScale(contentRect.width / width, contentRect.height / height);// 為縮略圖節(jié)點設置縮放
     thumbnail_data.setAnchor({ x: 0.5, y: 0.5 });
     dm.add(thumbnail_data);


     const mask = dm.getDataByTag('mask'); 
     thumbnail_data.setHost(mask); 
     thumbnail_data.s('clip.host', true); // 開啟吸附裁切后，縮略圖節(jié)點會根據(jù)吸附的節(jié)點進行裁切


     ht.Default.startAnim({
        duration: 2000,
        easing: function (t) { return t; },
        finishFunc: function () {
              dm.remove(thumbnail_data); // 動畫結束后移除縮略圖節(jié)點
        },
        action: function (v, t) {
              thumbnail_data.s('opacity', 1 - v + 0.1);
              mask.setScaleX(1 - v);
              thumbnail_data.iv();
        }
     });
}


view.mi((e) =>{
  if(e.kind === 'onClick' && e.type === 'data'){
        if(e.data.getTag() === 'switchBtn'){ // 點擊按鈕切換圖紙
        const thumbnail = generateThumbnail(); // 生成縮略圖
        ....
        createThumbnailData(thumbnail); // 生成縮略圖節(jié)點
        ...
      }
    }
})

在圖撲軟件 HT 項目中實現(xiàn)場景/圖紙切換，關鍵在于遵循 dataModel.clear() + view.deserialize() 的核心步驟，并避免重復創(chuàng)建 ht.graph3d.GraphView 實例。

為了提升用戶體驗，添加過渡效果是重要環(huán)節(jié)。無論是通過動態(tài)調整場景后處理屬性（如景深、亮度）還是利用精心設計的 2D 圖紙動畫（如幀序列），本質上都是對 HT 引擎靈活性和設計者創(chuàng)意的結合應用。不僅優(yōu)化了技術流程，更能創(chuàng)造出引人入勝的視覺表現(xiàn)，是當前 Web 可視化項目中的重要實踐。

審核編輯 黃宇