Open AlexZ33 opened 3 years ago
Lottie + BodyMovin
支持直接将设计在 Adobe AE 制作的动效实现到多个平台 优点： 真正的从设计直接到动画实现的方案 Web 端支持 svg, canvas, CSS3 三种实现方式 支持一些事件增强交互性 跨平台性比较好 缺点： 需要设计人员会使用 AE 部分 AE 特效不支持 参考文章：https://segmentfault.com/a/1190000018577416
Flare 有在线的动画编辑器可以制作动画，导出 .flr 格式的文件，可以使用其提供的 runtime 在对应平台使用，目前支持 JS 和 Flutter 平台，在 web 平台是基于 canvas 优点： 有在线的编辑器可以比较方便进行动画的制作 缺点： 支持的平台比较少，只有 web 和 Flutter （注：在 web 端试验了一下官网示例，没有跑起来） 在线动画制作器有一定学习成本 相关地址：https://www.2dimensions.com/
animachine 是以 chrome 插件的形式的动画编辑器，可以直接编辑当前页面中的元素并添加动画效果，最后导出 .js 文件，结合 GSAP 即可生成之前编辑好的动画 优点： 可以直接在页面中使用编辑器制作动画，比较直观 缺点： 看项目的 Git 仓库已经3年没更新了，而且官网文档页面也进不去，估计已经无人维护 生成代码只支持 web 端，跨平台性不好 文档页面进不去，没有文档参考如何使用编辑器 相关地址：https://animachine.github.io/site/
microsoft PXT 流程
一个在线的代码编辑器，支持通过类似拼图的方式进行代码逻辑设计，生成对应 JS 代码用以控制其支持的硬件及软件系统，主要用于儿童及初学者的变成教学
它是基于 google 的 blockly 开发的
优点：
在线编辑器是 WEB 版的，使用方便，对不懂技术的人也可以很快上手进行程序设计 其设计的流程与思想值得我们参考
缺点：
通过拼图实现代码逻辑，与我们想要生成动画逻辑有区别
相关地址：https://github.com/microsoft/pxt
Blockly google
这是一个基于 Web 的可视化代码编辑器，可以通过拖拽“块”的方式来进行编程并生成代码，它目前支持生成5种代码分别是：Javascript, Python, Dart, PHP, Lua
可视化编程，使用方便，对不懂技术的人也可以很快上手进行程序设计 支持生成5种主流语言
相关地址：https://developers.google.com/blockly
MIT scratch
同样基于 blockly 进行逻辑设计的 Web 编辑器，与以以上的区别是该编辑器直接支持动画的制作，并且编辑器中可以直接预览动画效果，预览的动画为 canvas 实现
优点
同样是基于blockly的可视化编辑器，使用方便 原本就有编辑动画的功能，与我们的需求比较接近
缺点
制作完动画后，导出的格式为 .sb3 不能直接使用，导出动画方式待具体研究
Framer
从交互动效制作到 DEMO 输出的一体化方案，包含编辑器 Framer X(未开源)，动效库 Framer.js，最后输出的 DEMO 为动效库的 API 调用加上动画描述的 JS 对象
一整套流程比较完善 最终输出的有描述动画的 JS 对象，对转为 MAML 可能比较方便
编辑器未开源 收费 编辑器的使用要看是否符合设计需求
相关地址：https://www.framer.com/ https://github.com/koenbok/Framer
Mo.js
提供了动画制作的动画库以及一个基于 Timeline 的动画编辑器，输出的结果为基于动画库的 JS 代码
拥有很成熟的动画库
动画编辑器3年没有更新，估计已经没人维护，且没有文档，使用起来比较困难
相关地址：https://mojs.github.io/ https://github.com/mojs/mojs
Timeline.js
该方案包含动画库以及 Timeline 动画编辑器，编辑之后可以直接导出基于动画库的 JS 代码，代码是基于动画库的 API 调用，没有 DSL
整套流程可用
编辑器功能很有限，很多功能还是需要编写 JS 代码，编辑器主要是起到调整参数及预览的作用 没有 DSL，生成的为 JS 代码
相关地址：https://github.com/vorg/timeline.js
AlexZ33
commented
3 years ago AlexZ33
commented
3 years ago AlexZ33
commented
3 years ago
Lottie + BodyMovin
支持直接将设计在 Adobe AE 制作的动效实现到多个平台 优点： 真正的从设计直接到动画实现的方案 Web 端支持 svg, canvas, CSS3 三种实现方式 支持一些事件增强交互性 跨平台性比较好 缺点： 需要设计人员会使用 AE 部分 AE 特效不支持 参考文章：https://segmentfault.com/a/1190000018577416
Flare 有在线的动画编辑器可以制作动画，导出 .flr 格式的文件，可以使用其提供的 runtime 在对应平台使用，目前支持 JS 和 Flutter 平台，在 web 平台是基于 canvas 优点： 有在线的编辑器可以比较方便进行动画的制作 缺点： 支持的平台比较少，只有 web 和 Flutter （注：在 web 端试验了一下官网示例，没有跑起来） 在线动画制作器有一定学习成本 相关地址：https://www.2dimensions.com/
animachine 是以 chrome 插件的形式的动画编辑器，可以直接编辑当前页面中的元素并添加动画效果，最后导出 .js 文件，结合 GSAP 即可生成之前编辑好的动画 优点： 可以直接在页面中使用编辑器制作动画，比较直观 缺点： 看项目的 Git 仓库已经3年没更新了，而且官网文档页面也进不去，估计已经无人维护 生成代码只支持 web 端，跨平台性不好 文档页面进不去，没有文档参考如何使用编辑器 相关地址：https://animachine.github.io/site/
microsoft PXT 流程
一个在线的代码编辑器，支持通过类似拼图的方式进行代码逻辑设计，生成对应 JS 代码用以控制其支持的硬件及软件系统，主要用于儿童及初学者的变成教学
它是基于 google 的 blockly 开发的
优点：
缺点：
相关地址：https://github.com/microsoft/pxt
Blockly google
这是一个基于 Web 的可视化代码编辑器，可以通过拖拽“块”的方式来进行编程并生成代码，它目前支持生成5种代码分别是：Javascript, Python, Dart, PHP, Lua
优点：
缺点：
相关地址：https://developers.google.com/blockly
MIT scratch
同样基于 blockly 进行逻辑设计的 Web 编辑器，与以以上的区别是该编辑器直接支持动画的制作，并且编辑器中可以直接预览动画效果，预览的动画为 canvas 实现
优点
缺点
Framer
从交互动效制作到 DEMO 输出的一体化方案，包含编辑器 Framer X(未开源)，动效库 Framer.js，最后输出的 DEMO 为动效库的 API 调用加上动画描述的 JS 对象
优点
缺点
相关地址：https://www.framer.com/ https://github.com/koenbok/Framer
Mo.js
提供了动画制作的动画库以及一个基于 Timeline 的动画编辑器，输出的结果为基于动画库的 JS 代码
优点
缺点
相关地址：https://mojs.github.io/ https://github.com/mojs/mojs
Timeline.js
该方案包含动画库以及 Timeline 动画编辑器，编辑之后可以直接导出基于动画库的 JS 代码，代码是基于动画库的 API 调用，没有 DSL
优点
缺点
相关地址：https://github.com/vorg/timeline.js