ae导出的json文件怎么预览

AE（After Effects）是一个非常流行的视频后期处理工具，它可以制作出非常炫酷的视频效果。在AE中处理好的动画效果可以通过导出json文件的形式用于Web开发中，以达到在网页中嵌入动画的目的。但是，在导出后的json文件如何进行预览呢？本文将介绍一下具体步骤。

首先，我们需要一个json文件的预览工具，这里我们推荐使用bodymovin插件，它是一个专门用于解析AE导出的json文件并在Web浏览器中预览的插件。

bodymovin.min.js

我们可以从GitHub上下载最新版本的bodymovin插件。将下载好的bodymovin.min.js文件放在你的页面所在目录中，然后在HTML文件中引用该文件：

<script src="bodymovin.min.js"></script>

接下来，我们需要添加一个容器来包含我们的动画。在HTML文件中添加以下代码：

<div id="animation"></div>

我们为动画添加了一个id属性，该属性的名称可以自定义，用于在后面的脚本中引用该容器。

最后，我们需要创建一个JavaScript脚本来初始化我们的动画。在HTML文件中添加以下代码：

<script>
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('animation'),renderer: 'svg',loop: true,autoplay: true,path: '动画文件.json'
    })
</script>

以上代码表示我们从动画文件中加载动画，并将其渲染到id为“animation”的容器中。’renderer’属性指定了动画的渲染方式，这里我们采用了SVG。‘loop’属性指定了动画是否循环播放，而‘autoplay’属性则指定了动画是否一开始就自动播放。最后的‘path’属性则指定了动画文件的路径。

有了以上代码，我们就可以在Web浏览器中预览AE导出的json文件中的动画效果。是不是非常简单？