安装Bodymovin After Effects

Bodymovin是一个免费的扩展，可以让您导出After Effects合成为JSON文件，嵌入网站和添加到应用程序。让我们看看如何安装Bodymovin扩展。

我们将通过4个步骤做到这一点:

1. 安装Bodymovin扩展
2. 验证After Effects首选项
3. 渲染一个动画
4. 将动画放置在一个站点中

1.安装Bodymovin扩展

头Adobe交换并安装免费的Bodymovin扩展。

注意:如果你有多个创意云订阅，确保你在添加扩展之前登录到正确的一个，这样你可以很容易地在下一步找到它。

2.验证After Effects首选项

打开后效果和寻找Bodymovin，列出在窗口>扩展。

如果Bodymovin不存在，尝试退出并重新启动后的影响。

要确保您的文件权限设置正确，请单击After Effects > Preferences > Scripting & Expressions(在Windows上编辑> Preferences > Scripting & Expressions)。

寻找允许脚本写文件和接入网络确保检查过了。

3.渲染一个动画

现在我们将使用Bodymovin导出一个合成。

在After Effects中打开动画，选择Window > Extensions > Bodymovin导出。选择你想要渲染的动画和任何其他合成。

注意:如果你的合成中有任何栅格化的图像，请确保在“设置”菜单中启用了压缩。

检查目标文件夹，命名要导出的JSON文件，点击保存，然后点击渲染。

渲染之后，您现在应该在目标文件夹中有一个JSON文件。现在我们将把动画放到网站上。

4.将动画放置在一个站点中

我们将在这一步使用Webflow，但概念是相同的手工编码或使用另一个平台。

从左侧的资产面板，拖动动画到您的布局。

就是这样!当您发布、导出或预览时，您的动画应该自动播放。

如果你还没有，看看我们的全部后效果和Lottie在Webflow课程．

看到Airbnb的洛蒂网站查看其当前支持的After Effects功能列表。