2025年json动画代码（2025年json动画素材）

AE导出json格式的Web动画脚本Bodymovin

1、AE导出json格式的Web动画脚本Bodymovin的说明如下：功能概述：Bodymovin是一款用于从Adobe After Effects中导出Web动画的脚本工具，它可以将AE中的动画转换为.json文件格式。这种json文件格式的文件体积相对较小，通常只有几百kb左右，因此加载速度要比图片快得多。

2、勾选“允许脚本写入文件和访问网络”。打开Bodymovin插件：在AE中，进入“窗口”菜单。选择“扩展” “Bodymovin”。导出Lottie Json动画 准备动画项目：在AE中完成你的动画项目，确保所有图层和动画效果都已正确设置。选择导出设置：在Bodymovin插件界面中，选择你要导出的合成（Composition）。

3、打开AE软件。点击“编辑”“首选项”“常规”菜单项。在弹出的首选项窗口中，选中“允许脚本写入文件和访问网络”选项。点击“确定”按钮保存设置。打开Bodymovin界面：在AE的菜单栏中，点击“窗口”“扩展”“Bodymovin”菜单项。这将打开Bodymovin插件的界面，你可以在这里进行动画的导出设置。

AE制作Json动画教程

1、配置AE：打开AE，点击“编辑”“首选项”“常规”，选中“允许脚本写入文件和访问网络”。使用插件：点击“窗口”“扩展”“Bodymovin”菜单项，打开Bodymovin界面。实际案例教程演示 以首页ICON效果制作为例：在AI中设定基础尺寸和图层细分：命好名称，便于后续操作。

2、导入AI源文件：保持图层大小，定义合成参数。创建形状：选择所需图层。动效创作：调整颜色。导出JSON文件：处理渐变颜色。测试动画效果：与开发团队沟通。总结与建议：提前了解Lottie支持的特性和无法实现的功能。与开发团队沟通，选择最合适的动画实现方式。图层分组，便于AE内制作动效。

3、在AE中新建一个空的项目。新建一个名为“视频”的合成（Composition）。在合成中制作一段简单的动画（如位置移动、缩放变化等）。使用Bodymovin插件导出动画：打开Bodymovin插件窗口。在插件窗口中，可以看到“视频”合成已经出现在下面的列表中。选中“视频”合成。设置好json文件的输出位置。

Lottie动画——.json动画的制作与输出

1、点击“Render”按钮开始导出动画。预览导出的.json动画：Bodymovin插件还提供了预览功能。点击插件界面上的“Preview”按钮。点击“Browse”载入刚刚生成的.json文件。即可在预览窗口中看到动画被原汁原味地导出。注意事项 在安装Bodymovin插件时，确保AE软件已关闭，以避免安装失败。

2、Airbnb推出Lottie动画库，与Bodymovin AE插件结合，将AE制作的动画导出为json文件，在移动设备上以原生动画形式播放。在课件中找到Bodymovin插件，步骤如下：下载插件包至本地，双击安装在AE软件中，确保AE软件关闭。

3、准备动画：在AE中制作好需要导出的动画，并确保动画效果符合预期。设置导出参数：在Bodymovin插件界面中，可以设置导出的json文件的各项参数，如输出路径、帧率、尺寸等。开始导出：设置好参数后，点击“Render”按钮，Bodymovin插件将开始将AE动画导出为json文件。

4、设置导出参数，如输出路径、文件名、图像格式（通常选择PNG序列）等。导出动画：点击“Render”按钮开始导出动画。导出过程中，Bodymovin插件会生成一个包含Json文件和图像资源的文件夹。预览和测试Lottie Json动画 在线预览：你可以使用Lottie的官方预览工具或第三方在线预览平台来测试你的Json动画。

5、导出动画：点击Bodymovin界面中的“Render”按钮开始导出动画。导出过程可能需要一些时间，具体取决于动画的复杂性和计算机的性能。导出完成后，你将在指定的输出路径下找到生成的json文件，这就是Lottie动画文件。在移动设备上使用Lottie动画 集成Lottie库：在你的Android或iOS项目中，集成Lottie动画库。

6、Lottie简介 Lottie使用了Bodymovin插件将After Effects中的矢量图形、形状、蒙版、插值动画、图层效果等转换为JSON文件，并提供了一套API和SDK，可以方便地将这些动画集成到应用程序中。它支持动画的缩放、插值、交互等效果，大大提高了动画的制作和集成效率，同时也提高了用户体验和交互效果。