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

場景 / 圖紙核心切換步驟

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

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

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

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

場景切換過渡效果

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

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

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

景深動(dòng)畫過渡

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

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

實(shí)現(xiàn)步驟

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

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) => {
        // 動(dòng)態(tài)設(shè)置景深閾值
        dof.aperture = v * 0.2
        }
}
ht.Default.startAnim(anim);

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

其他屬性過渡效果

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

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

利用 2D 圖紙動(dòng)畫實(shí)現(xiàn)過渡

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

幀動(dòng)畫過渡（云朵過渡）

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

實(shí)現(xiàn)步驟

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

代碼示例

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]);
    }
})

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

其他創(chuàng)意效果

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

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

2D 圖紙間切換過渡

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

利用縮略圖過渡

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

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

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

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

將縮略圖設(shè)置為該節(jié)點(diǎn)的內(nèi)容。

■應(yīng)用動(dòng)畫效果：在動(dòng)畫中調(diào)整縮略圖節(jié)點(diǎn)的裁切、透明等屬性，以達(dá)到過渡效果。

代碼示例

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


     const thumbnail = gv.toDataURL(null, null, 1, 0); // 生成縮略圖
}
functioncreateThumbnailData(thumbnail){
     const thumbnail_data = new ht.Node(); // 生成縮略圖節(jié)點(diǎn)
     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é)點(diǎn)設(shè)置位置
     thumbnail_data.setSize({ width, height });// 為縮略圖節(jié)點(diǎn)設(shè)置尺寸
     thumbnail_data.setScale(contentRect.width / width, contentRect.height / height);// 為縮略圖節(jié)點(diǎn)設(shè)置縮放
     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é)點(diǎn)會(huì)根據(jù)吸附的節(jié)點(diǎn)進(jìn)行裁切


     ht.Default.startAnim({
        duration: 2000,
        easing: function (t) { return t; },
        finishFunc: function () {
              dm.remove(thumbnail_data); // 動(dòng)畫結(jié)束后移除縮略圖節(jié)點(diǎn)
        },
        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'){ // 點(diǎn)擊按鈕切換圖紙
        const thumbnail = generateThumbnail(); // 生成縮略圖
        ....
        createThumbnailData(thumbnail); // 生成縮略圖節(jié)點(diǎn)
        ...
      }
    }
})

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

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

審核編輯 黃宇