三維場景模型動畫

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

1.1 版本

1.2 應用場景

在三維自訂場景中，若模型帶有動畫方案或設定了線框動畫，可以為三維場景新增模型動畫。效果如下圖所示：

模型動畫可與其他組件實現聯動效果，具體請參見 FVS三維組件動畫應用實例 。本文檔僅介紹模型動畫的設定。

若模型中帶有動畫方案，可透過以下三種方式新增動畫：

• 自訂模型組件編輯頁面：「模型>模型動畫管理」

• 標題等組件：新增「交互>滑鼠點選事件>三維模型動畫」事件

• 標題等組件：新增「交互>滑鼠點選事件>JavaScript」事件
  

注：若動畫方案中涉及的動畫物件因 glb 檔案/匯入模型被刪除而刪除，對應的動畫方案不刪除，僅設定內動畫物件顯示為動畫不存在。

2.1 模型動畫管理

1）在「模型」配置面板中，點選「模型動畫管理」，再點選「新增動畫方案」。

注1：V2.10.0 之前版本，需要先勾選「開啟模型動畫」，重新整理增動畫方案。詳情請參見 V2.10.0更新日誌。

注2：當三維場景內無動畫物件時，新增動畫方案按鈕灰化，滑鼠懸浮提示「當前無動畫物件可配置」。

2）動畫方案的設定項包括：

• 方案名稱：自訂動畫方案名稱，預設名稱為空。不支援為空、不支援多個動畫方案重名

• 動畫物件：支援選擇當前三維組件內的模型動畫和線框動畫，支援多選
  

• 播放命令：僅支援選擇開始播放

• 命令時機：支援立即播放動畫、延遲播放動畫。支援自訂延遲時間，預設為 1000 毫秒
  

• 播放方式：支援設定循環播放和單次播放，預設為單次播放

注：「方案名稱」和「播放命令」為 V2.10.0 版本新增。

3）動畫方案設定完成後，模型動畫管理介面支援對動畫方案進行編輯、刪除、是否開啟的操作

2.2 三維模型動畫事件

所有支援點選事件的組件，均支援設定三維模型動畫事件。

選中組件後，點選「交互」，點選「新增事件>滑鼠點選」，選擇「三維模型動畫」。

執行動作設定項包括：

• 動作名稱：自訂動畫方案名稱，預設名稱為空。

• 動畫物件：支援選擇當前三維組件內的模型動畫和線框動畫，支援多選
  

• 播放命令：支援開始播放、暫停播放和跳出播放

• 命令時機：支援立即播放動畫、延遲播放動畫。支援自訂延遲時間，預設為 1000 毫秒
  

• 播放方式：支援設定循環播放和單次播放，預設為單次播放

注1：「播放命令」和「播放方式」為 V2.10.0 版本新增。

注2：「命令時機」和「播放方式」僅在「播放命令」設定為開始播放時支援設定。

注3：同一個三維模型動畫內不允許建立多個動畫效果，即基於不同動畫物件定義不同的播放命令、命令時機、播放方式。

2.3 JavaScript事件

所有支援點選事件的組件，均支援設定 JavaScript 事件。

選中組件後，點選「交互」，點選「新增事件>滑鼠點選」，選擇「JavaScript」。如下圖所示：

透過 getAnimationByName 獲取模型的動畫，JS 程式碼如下：

const animation = duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").getAnimationByName("具體動畫名稱")

支援設定模型動畫開始播放、暫停播放和結束播放。

開始播放的程式碼如下：

animation.play({
  // 是否重新開始播放
  isRestart: false,
  // 是否循環播放
  isLoop: false,
  // 播放結束是否恢復起始狀態
  isInitialOnPlayStop: false,
  // 播放結束回呼函式
  onAnimationPlayStop: () => {}
})

暫停播放的程式碼如下：

animation.pause()

結束播放的程式碼如下：

animation.stop(true)

注：true為動畫跳出，並恢復為動畫播放前的狀態；false為動畫跳出，保持在當前動畫幀。