/bodymovin-parser

ae-bodymovin解析器 +代码生成器

Primary LanguageTypeScriptMIT LicenseMIT

bodymovin-parser

基于bodymovin的解析器和代码生成器

为什么要开发这个工程

  • After Effect是知名的后期动效开发软件，基于AE的UI开发可以为web端带来丰富的动画效果和视觉展现，成为UI设计重要的组成部分。那么基于AE的动画展现就成为前端开发的重大难题

  • Bodymovin是After Effect的一种插件，可以将动画以JSON的形式进行导出，从而为前端开发铺平了道路。我们可以基于 lottie库完成对web侧的渲染，也可以基于渲染引擎完成对移动web的渲染。但是都存在一些问题：

    • 库体积太大，lottie.js有500多kb，渲染引擎例如pixi.js也有近500kb的体积。这些库在诸如小程序等对体积加以限制的平台下， 会占据很多的空间。而且即使将其服务化，庞大的脚本体积也会对加载性能带来影响。

    • 缺乏跨平台解析复用，lottie.js虽然支持dom/svg/canvas三种渲染模式，但是代码结构松散且庞大，无法对全面 甚至部分解析**复用，由此缺乏跨平台使用能力

    • json难以理解，虽然lottie.js提供helper文件夹用于帮助用户阅读bodymovin导出的json，但是不能快速对内容进行上手与使用。

    • 代码生成能力，希望能够基于json快速生成所需代码，提升开发效率

新工程的优势

  • lerna工程化——使代码管理更加方便，
  • 代码更轻量——基于rollup打包和代码结构拆分，使得能够实现快速植入。
  • 解析器和代码生成分离——让开发者基于解析器实现跨平台代码生成
  • 高质量动效还原——能够满足大众场景的动效开发，且能力在不断增强。

现支持能力

基于图层的帧动画渲染，支持层级展示和web代码生成。

开发计划

时间 内容
2021年Q2 完成解析器除shapes的全面支持、以及dom代码生成与react组件的支持。
2021年Q3 完成解析器对json的全面支持、以预览能力

开发进度

时间 内容
2021年5月1日 开始开发
2021年5月10日 完成对图层类json的解析支持
2021年5月20日 完成基于解析器的DOM代码生成
2021年5月25日 完成基于解析器的小程序代码生成

规划

时间|修改库|修改内容 ---|--- 2021Q3|core|1. 支持文字渲染 2021Q3|web|1. 支持动画播放组件 2021Q3|taro|1. 支持小程序帧动画组件。[完成]

调试入口

// 进入web调试工程
cd example/web
// 启动页面
npm run start
// 启动文件处理服务
npm run server

// 打开页面
http://localhost:3000/

整体架构

架构图