前言
在製作3D視覺化看板時，除了精細的模型結構外，炫酷的動畫效果也是必不可少的。無論是複雜的還是簡單的動畫效果，要實現100%的自然平滑都是具有挑戰性的工作。這涉及到物理引擎的計算和對動畫效果的數學建模分析。一般來說，只有專業的3D建模從業人員才能完成這項挑戰。然而，在實際情況下，當我們對動畫精細程度的要求不是特別高時，仍然可以藉助一些外部工具來實現一些常見的動畫效果，例如巡檢、移動和旋轉等。今天小編向大家介紹的工具就是Babylon.js中提供的動畫曲線編輯器。使用者只需要透過簡單的拖拽和點選操作，就能自定義設計想要的動畫效果，提升3D視覺化看板的視覺效果。（如下圖所示）
環境配置
要使用動畫曲線編輯器，就得先使用 Babylon Inspector，Babylon Inspector是 Babylon.js 提供的一個強大的模型檢查工具，不僅可以檢視模型網格物件的各種屬性，還可以提供 gizmo 工具來讓使用者手動拖拽縮放平移網格體，實現和3D模型的實時互動，除此之外，Babylon Inspector還具備動畫曲線編輯器等強大工具，讓使用者透過UI操作就能自定義設計動畫效果，下面是使用Babylon Inspector前需要了解和準備的一些環境配置：
1） babylon playground 站點 ：這個站點提供了一個線上的 Babylon.js 程式碼執行環境，使用者可以在這個平臺上協同建立3D場景。
2） babylon sandbox 站點 ：這個站點提供了一個線上的模型執行檢查環境，使用者可以在這個平臺上檢查自己的 模型檔案是否正常執行，引數設定是否如預期。
3）透過程式碼引入Babylon.js：
npm install @Babylon.js/core
npm install @Babylon.js/inspector
引入依賴包之後，需要指定對應的3D應用場景的Inspector檢視器：
import { Inspector } from "@Babylon.js/inspector";
function createScene(){
// create Babylon.js scene
}
動畫編輯器的操作指南
在使用動畫編輯器之前，小編向大家簡單介紹一下Babylon.js中的動畫。實際上，Babylon.js中的動畫是按順序執行的一系列靜態畫面。因此，只要瞭解每一幀模型物件的屬性值，就可以製作出對應的動畫效果。
動畫編輯器中修改模型屬性的兩種方法
-
第一種方法：選中一個模型物件，選擇右側物件的 Animations 屬性，點選 Editor 就可以新增或修改動畫。
-
第二種方法：選中一個模型的 AnimationGroup ,即可編輯 Group 中每個單獨動畫。
動畫編輯器的選單欄指南
（1）選擇左側的選單編輯欄，點選編輯按鈕。
（2）然後就會進入到這個介面。
"+" 按鈕即為建立動畫按鈕，一個動畫編輯器中可以建立多個動畫，每個動畫中的選項如下：
- Display Name ：動畫名稱。
- Mode ：Mode為List表示內建的模型屬性，Mode為Custom表示自定義的模型屬性。
- Property：指的是要對動畫進行操作的物件的屬性。例如，可以選擇移動一個模型的位置屬性，旋轉模型的旋轉屬性，或者改變模型的顏色屬性等。透過選擇不同的屬性，你可以控制模型在動畫中的變化和動作。
- Type ：指的是要應用於屬性的動畫效果的型別。在動畫編輯器中，可以選擇不同的動畫型別，例如線性動畫、貝塞爾曲線動畫、彈簧效果動畫等。每種動畫型別都有自己特定的方式來改變屬性的值，從而實現不同的動畫效果。
（3）接下來我們再回到第一步，找到編輯器的控制皮膚。
其中按鈕分別是：
- 當前 key 幀數：當使用者選中一個 key 時,可以透過這個輸入框來修改 當前 key 的幀號 （選中一個key時）
- 當前 key value：當使用者選中一個 key 時，可以透過這個輸入框來修改當前 key 的屬性具體值 （選中一個key時）
- 建立關鍵 key：這個按鈕將會在整個播放軸上建立一個 新的關鍵key， 並且將渲染畫布此時網格物件的對應屬性值作為新建立 key 的屬性值，(換句話說，可以在 inspect 頁面透過 gizmo 工具拖動旋轉物體到指定位置，點選建立 關鍵 key 按鈕就能建立一個新的關鍵 key , 並將手動拖動的網格物件的屬性值作為 該關鍵 key 的value 值)
- 幀畫布 ，這個按鈕會自適應當前設定的關鍵 key， 當設定的 key value 超出畫布時，可以使用該按鈕來重置畫布。
接下來的 5 個按鈕（下圖）都是用來控制 每個 關鍵 key 和前後幀 的 value 之間的變化關係，也就是關鍵 key 的左右切線：
- 平鋪切線，會讓當前關鍵 key 的左右切線都變成 水平線，在這種情況下，由於左右斜率一致，我們可以做出一些更加平滑的曲線效果出來
- 線性切線，會讓當前關鍵 key 的左右切線都變成 指向前後關鍵 key 的 一次線條，一般用來展示一些勻速變化關係
- 切分左右切線模式，可以單獨的控制 關鍵 key 的左右切線
- 整合左右切線模型，如上，切分模式的反面
- 階梯式切線，在從當前 key 到 下一個 key 之間的幀，value值保持不變，在下一個關鍵 key 到來時，value 瞬間切換到該 key value，可以用來製作一些轉身，旋轉的瞬時動畫。
（4）最後給大家介紹動畫播放皮膚
按鈕分別如下
-
第一幀和最後一幀
-
前一幀和後一幀
-
前一個關鍵key和後一個關鍵key
-
正放與倒放動畫
-
播放範圍，需要指定動畫開始和結束播放幀數
正常情況下，指定了動畫屬性值和播放模式之後，就可以點選建立 關鍵 key 來設定關鍵動畫值，一方面可以在 inspector 中手動拖動網格物件，讓新建key來獲取指定 value, 另一方面也可以在 動畫播放皮膚反覆檢視修改動畫屬性，製作好動畫之後，就可以使用儲存按鈕來將製作好的動畫匯入了。對於歷史動畫也可以透過匯入按鈕來對動畫做細節調整。
舉個例子：動畫操作實戰
下面小編將以一個繞場一週的動畫為例，給大家詳細介紹如何使用Babylon.js：
（1）首先需要獲取到總幀數，以及特定行為(轉向移動)的對應幀數。(這一步是動畫製作最重要的一步，總體上可以參考物理位移原理 位移 = 速度 * 時間 來合理設計幀數。)
-
獲取到物體運動的路線圖，記錄下每一個特殊(轉向移動)幀模型物件所在的座標(這裡可以使用Inspector 當中的座標拾取功能以及 位移 gizmo 工具來快速獲取)
-
給物體運動設定一個固定速度，比如每秒 2.5 個單位，使用座標算出來每個座標到座標的距離，然後除以時間，結果就是每個單獨路徑的耗時。
-
然後計算累計耗時
累計耗時乘以 預設 每秒渲染的幀數， 就可以得到最終的動畫幀資料了(切記不要忘了乘每秒幀數，預設每秒60幀)。
（2）接下來就要引入 Inspector 模組了，參考文章開始的 playground、sandbox或程式碼方式來引入 Inspetor, 引入後開啟動畫編輯器，新建動畫。
修改動畫播放範圍：
確定Y軸動畫：
然後按照“建立 新 key” => “設定新key frame value” => “播放動畫”的步驟來建立新key：
透過切線按鈕可以調整動畫之間的線性關係：
最後就是點選儲存按鈕，點選匯出成 file，程式碼如下所示：
// url 檔案方式
let animation = Animation.ParseFromFileAsync(null,urlPath)
// json hard-code
var json = animationJson; // 將動畫檔案內容寫死在程式碼裡
let animation = [Animation.Parse(animationJson[0])];
// 直接執行動畫，或者包裝成 animationGroup 來執行，後者封裝性更好；
let robot.animations= animation;
scene.beginAnimation(robot,0,8871,true);
// animatioinGroup
let robotAnimation = new BABYLON.AnimationGroup("robotAnim",scene);
robotAnimation.addTargetedAnimation(animations[0],robot);
robotAnimation.addTargetedAnimation(animations[1],robot);
robotAnimation.from = 0;
robotAnimation.to = 3120;
robotAnimation.start(true,1,robotAnimation.from,robotAnimation.to,false);
總結
以上便是使用動畫曲線編輯器來實現一個簡易動畫的全過程了，最後也上傳一份程式碼整合 Inspector 模組的示例，感興趣的小夥伴可以試試。 3D-Inspector.zip
擴充套件連結：