❌

阅读视图

发现新文章，点击刷新页面。

ps, ai, ae插件都可以用html和js开发了

✇掘金 前端
nujnewnehc

Adobe ScriptUI 学习之旅：从标记语言到跨应用交互

1. 缘起：对 Duik 插件的探索

作为 After Effects 用户，我一直对 Duik 这个强大的角色动画插件库充满好奇。Duik 提供了丰富的骨骼动画工具，极大地简化了角色动画的制作流程。然而，当我尝试深入学习它的代码结构时，却遇到了一些挑战：

  • 文档收费：完整的 Duik 文档需要付费购买
  • 代码结构问题：Duik 没有采用模块化设计，而是大量使用全局变量作为功能实现方式，导致代码可读性差，难以维护和扩展
  • 学习曲线陡峭：对于初学者来说，理解其代码逻辑较为困难

2. 寻找官方文档的历程

为了更好地理解 Adobe 脚本开发，我开始从 After Effects 的帮助菜单中寻找相关文档。有趣的是，Adobe 官方并没有直接提供完整的 ScriptUI 文档，而是在帮助菜单的链接中指向了第三方资源：

通过这些文档，我了解到 ScriptUI 不仅适用于 After Effects，还可以在其他 Adobe 应用中使用，并且支持跨应用交互，这为我的开发思路打开了新的大门。

3. 痛点：ScriptUI 构建的复杂性

在学习过程中，我发现 ScriptUI 的构建方式相对繁琐：

  • 需要通过脚本代码手动创建每个 UI 组件
  • 布局管理需要编写大量代码
  • 修改 UI 结构时需要调整多处代码

Duik 虽然抽象了一些方法来简化这个过程，但对于我来说仍然不够直观。我开始思考：是否可以使用更简洁的标记语言来描述 UI，然后编译成 ScriptUI 代码？

4. 解决方案：标记语言到 ScriptUI 的转换

基于这个想法，我创建了一个代码仓库，实现了从 HTML 标记语言到 Adobe ScriptUI JSX 代码的转换。在开发初期，我考虑过使用 Vue Compiler 来处理标记语言，但后来发现 Vue 支持的特性和 HTML 差别较大，而且我们并不需要 HTML 的全部功能，因此最终决定自己实现一个轻量级的转换引擎。

核心功能

  • HTML 标记语言支持：使用熟悉的 HTML 标签来描述 UI 结构
  • 组件映射：将 HTML 标签映射到对应的 ScriptUI 组件
  • 事件处理：支持内联 onClick 事件绑定
  • 实时编译：通过文件监视器实时将 HTML 变更编译为 JSX

项目结构

项目采用 monorepo 结构，包含三个核心包：

  1. adobe-scriptui-html-to-jsx：核心转换引擎，负责将 HTML 标记转换为 ScriptUI JSX 代码
  2. adobe-scriptui-watcher：文件监视器，监视 HTML 文件变化并自动触发编译
  3. adobe-scriptui-ae-helper：示例应用，展示了如何使用该工具构建实际的 After Effects 助手工具

这种拆包设计的目的是为了模块化和可扩展性，现在主要用于 After Effects，但未来可以轻松扩展到其他 Adobe 应用中。

5. 实际应用：AE 助手工具

通过这个工具，我构建了一个功能丰富的 After Effects 助手工具，包含：

  • 弹性表达式：为属性添加弹性动画效果
  • 常用表达式：快速应用 loop、wiggle、random 等常用表达式
  • AI 文件导入：支持从 Illustrator 导入文件到 After Effects
  • 用户友好的界面：通过 HTML 标记语言快速构建和修改 UI

6. 未来展望

这个项目只是我对 Adobe 脚本开发探索的开始。未来，我计划：

业务调研与痛点解决

  • 表达式管理系统：针对设计师使用表达式的痛点，开发一个更智能的表达式管理系统。目前设计师们通常需要从文本文件中复制粘贴表达式，修改参数困难，应用到其他属性时容易出错，最终只好放弃使用表达式而回到关键帧动画。
  • 可视化表达式编辑器：开发一个可视化的表达式编辑器，让设计师可以通过界面调整参数，而不需要直接编写代码。

功能抽象

  • 跨应用组件库：构建一套适用于所有 Adobe 应用的组件库
  • 模板系统：创建可复用的 UI 模板
  • 跨应用工作流：实现不同 Adobe 应用之间的无缝交互

开发流程优化

  • AI 辅助开发：利用 AI 工具生成初始代码，然后根据文档进行调整
  • 可视化编辑器：开发一个可视化 UI 编辑器，进一步简化开发流程
  • 社区贡献：鼓励社区贡献，共同完善这个工具

7. 结语

通过对 Adobe ScriptUI 的学习和探索，我不仅解决了 UI 构建的痛点，还为 Adobe 脚本开发提供了一种新的思路。标记语言到 ScriptUI 的转换，使得 UI 开发变得更加直观和高效。

虽然这个项目还在不断发展中，但它已经展示了如何通过创新的方法来简化复杂的开发流程。我相信，随着更多功能的加入和社区的参与，这个工具将成为 Adobe 脚本开发者的有力助手，同时也能帮助设计师们更轻松地使用和理解表达式，提升动画制作的效率和质量。

提示：如果你也对 Adobe 脚本开发感兴趣，欢迎访问我的 GitHub 仓库 adobe-script-ui-helper，一起探索 Adobe 脚本开发的无限可能！

❌