Bodymovin是一款能夠將Adobe After Effects動畫導出為JSON格式的插件，可以在web上使用 Lottie 播放。

使用Bodymovin導出的JSON文件可以在網站或APP上展示動態的矢量圖形，在設計師的工作中具有極高的價值。今天我們就來了解一下，如何使用Bodymovin導出的JSON文件。

// 引入bodymovin.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/bodymovin.min.js"></script>
// 定義JSON文件的路徑
const animationPath = 'data.json';
// 獲取動畫容器元素
const animationContainer = document.querySelector('#animation-container');
// 設置動畫配置
const animConfig = {
container: animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
path: animationPath 
};
// 創建動畫實例
const anim = bodymovin.loadAnimation(animConfig);

注釋中的代碼演示了如何在頁面中引入Bodymovin的JS文件，創建JSON文件的路徑，并將動畫配置應用到動畫容器中。

在這段代碼中，我們創建了一個經過配置的Bodymovin動畫實例，并將它加載到頁面中的容器中。我們可以通過配置autoplay屬性來設置是否自動播放動畫，同時loop屬性用于設置動畫的循環播放。

// 停止動畫
anim.stop();
// 暫停動畫
anim.pause();
// 繼續動畫
anim.play();
// 跳轉到動畫的某個幀數
anim.goToAndStop(50, true);
// 換幀繼續播放動畫
anim.goToAndPlay(40, true);

除了創建動畫到頁面中之外，我們還可以通過提供給anim實例的方法來控制動畫的播放。代碼注釋中演示了一些常用的控制方法，其中的goToAndStop和goToAndPlay可以使我們控制動畫的幀索引，來實現某些特定控制功能。