Bodymovin UI 扩展面板安装和配置指南

Bodymovin UI 扩展面板安装和配置指南

bodymovin-extension Bodymovin UI extension panel 项目地址: https://gitcode.com/gh_mirrors/bod/bodymovin-extension

1. 项目基础介绍和主要编程语言

Bodymovin UI 扩展面板是一个用于 Adobe After Effects 的开源插件，主要用于将 After Effects 动画导出为 JSON 格式，以便在网页上使用。该项目的主要编程语言是 JavaScript，它利用了 Adobe 的 CEP（Common Extensibility Platform）框架来实现插件功能。

2. 项目使用的关键技术和框架

• Adobe CEP（Common Extensibility Platform）: 用于创建 Adobe 应用程序的扩展和插件。
• Node.js: 用于运行服务器端代码和处理依赖项。
• npm: 用于管理项目的依赖项。
• Gulp: 用于自动化构建过程。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

1. 安装 Adobe After Effects: 确保你已经安装了 Adobe After Effects，并且版本支持 CEP 扩展。
2. 安装 Node.js 和 npm: 确保你的系统上已经安装了 Node.js 和 npm。你可以从 Node.js 官网 下载并安装。
3. 安装 CEF 客户端: 你需要安装 CEF（Chromium Embedded Framework）客户端，用于远程调试扩展。你可以从 CEF 官网 下载并安装。

详细安装步骤

1. 克隆项目仓库

   打开终端或命令提示符，运行以下命令克隆 Bodymovin UI 扩展面板的仓库：

   git clone https://github.com/bodymovin/bodymovin-extension.git
   

2. 安装扩展依赖项

   进入项目目录并安装扩展的依赖项：

   cd bodymovin-extension
   npm install
   

3. 安装服务器依赖项

   进入 bundle/server 目录并安装服务器的依赖项：

   cd bundle/server
   npm install
   

4. 启动开发服务器

   返回到项目根目录并启动开发服务器：

   cd ../..
   npm run start-dev
   

5. 打开 CEF 客户端

   打开你之前安装的 CEF 客户端，并导航到 http://localhost:8092。此时，扩展窗口将会热加载，你可以在 CEF 客户端中使用开发者工具进行调试。

6. 在 Adobe After Effects 中加载扩展

   打开 Adobe After Effects，进入 窗口 > 扩展，你应该能够看到 Bodymovin UI 扩展面板。点击它以加载扩展。

完成

至此，你已经成功安装并配置了 Bodymovin UI 扩展面板。你可以开始使用它来导出 After Effects 动画为 JSON 格式，并在网页上使用这些动画。

bodymovin-extension Bodymovin UI extension panel 项目地址: https://gitcode.com/gh_mirrors/bod/bodymovin-extension