三維場景漫遊動畫

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

在三維場景中，支援透過新增多個視角形成一條漫遊路徑，再透過點選事件可實現三維場景漫遊動畫效果。

2.1 新增漫遊動畫

1）進入三維組件編輯介面，在「場景>相機」配置面板中，點選「新增漫遊動畫」，進入漫遊動畫設定面板。

2）先調整好三維場景視角後，再點選「新增當前視角」，即可將當前視角新增到列表中。再調整下一個視角，再點選新增，如此反覆進而形成一條路徑。

漫遊路徑各設定項如下表所示：

注：視角變化、刪除等操作不支援廢除，請謹慎操作。

3）完成一條漫遊路徑設定後，點選「完成」傳回「場景>相機」配置面板，在漫遊路徑列表中，支援編輯、預覽、刪除漫遊路徑。

• 「預覽」則可以在當前三維場景編輯介面查看播放漫遊動畫效果。

• 預覽途中可點選「跳出預覽」或使用快捷鍵 esc 停止播放動畫，空格鍵可暫停/繼續播放動畫。

• 中途跳出預覽或結束漫遊動畫，恢復至漫遊開始前視角。

注1：V2.0.0 及之後版本，若預覽途中點選設計器介面除「跳出預覽」按鈕外的其他地方，會提示「請跳出漫遊路徑預覽後，再進行其他操作」。

注2：V2.10.0 之前版本，中途跳出預覽或結束漫遊動畫，均停留在當前視角位置。

如下圖所示：

2.2 設定播放漫遊動畫

2.2.1 播放漫遊動畫事件

組件交互屬性 新增一種點選事件「三維漫遊動畫」。所有支援點選事件的組件，均支援設定點選播放漫遊動畫效果。

「三維漫遊動畫」功能配置項如下表所示：

例如：

2.2.2 JavaScript事件

「播放漫遊動畫」事件僅支援透過點選觸發，若想實現自動播放，可透過 playRoamAnimations API在「頁面載入結束事件」中使用 JavaScript 程式碼實現。

若範本僅有一個分頁，程式碼如下：

setTimeout(() => {
  duchamp.getWidgetByName("倉儲園區").playRoamAnimations({
   names:["漫遊路徑1"], 
   playMode: "once"
})
}, 3000)

若範本包含多個分頁，程式碼如下：

duchamp.on("storychange", (current) => {
 if (current === "頁面2") {
  setTimeout(() => {
   duchamp.getWidgetByName("倉儲園區").playRoamAnimations({
    names: ["漫遊路徑1"],
    playMode: "loop"    })
  }, 3000);
 }
});

例如：

2.3 設定暫停/繼續/跳出動畫

若要在範本預覽時，實現漫遊動畫的暫停、繼續或跳出，不支援快捷鍵實現，需透過 updateRoamAnimationAction API實現。

暫停播放程式碼如下：

duchamp.getWidgetByName("倉儲園區").updateRoamAnimationAction("pause");

繼續播放程式碼如下：

duchamp.getWidgetByName("倉儲園區").updateRoamAnimationAction("continue");

跳出播放程式碼如下：

duchamp.getWidgetByName("倉儲園區").updateRoamAnimationAction("exit");

例如：

2.4 注意事項

1）範本預覽時，若其他組件對正在播放漫遊動畫的三維組件呼叫 focus、refresh API，將終止播放漫遊動畫。
2）範本預覽時，若播放漫遊動畫的三維組件設定有監視重新整理，重新整理時將終止播放漫遊動畫。

點選下載範本：三維場景漫遊範例.fvs