[h5] 写个h5编辑器有多难？[3]

2018-09-01

前言

好吧事实上。。。最后我选择死亡。。。还是用上 vue 吧，数据绑定更新什么的实在太麻烦了。。。。

这个编辑器主要是因为工作中需要实际使用了，所以才使用 vue 快速实现了一个，对于这次的 h5 编辑器主要的目的是简化一些重复修改的问题，然后把这里的编辑器最后将会导出两个内容：

data.json 所有的 data 数据都记录在这里，包括帧动画等等
images 所有的 image 都保存在这里具体

主要的坑

1. 帧动画

由于需要实现帧动画，那么补间是必须的，一个动画的进度显示也是必须的，那么问题来了，1200帧的动画才不过 50 秒，如果是 48 帧的动画才不过 25 秒，显然浏览器是顶不住几千个 dom 来回摩擦的，这里只能考虑使用 canvas 去实现

2. 补间库

对于补间库，这里使用主流的 tween.js 实现，效果可见非常 nice，但是这并不能完全满足我们的需求，除了正常的补间库以外，部分动画是没有办法使用补间完成的，包括一些轨迹动画等等，这个时候需要使用内塞尔曲线作补充，除此以外，还有一些复杂的动画轨迹以上两种都没有办法实现的情况下，需要使用函数注入的方式取完成渲染，这个时候需要提供函数渲染器。