Fanvas SWF转HTML5 canvas动画

Fanvas是一个把swf转为html5 canvas动画的系统,由两部分组成:Actionscript实现的解析器、js运行库。 Flash做动画是最成熟最高效的方式,但由于终端基本不支持Flash播放,这给终端的动画制作带来了不少麻烦。 Fanvas可以把swf(包括矢量和位图)完美地转化为canvas动画,让美术妹子一次制作,到处运行。。。

应用特性

Flash做动画是最成熟最高效的方式,但由于终端基本不支持Flash播放, 这给终端的动画制作带来了不少麻烦。虽然google早在3年前就推出了swiffy,而flashCC也自带了flash转canvas动画的功能, 但是,这两个巨头的产品也跟他们的名气一样——大。swiffy和flashcc的运行库都有100+k, 而导出的数据文件也不小,这不适合终端加载。

技术难点

兼容swf的各种格式,主要是各种矢量命令和多种多样的图片格式; 实现高效的html5运行库,自主实现了位图缓存、自动脏区识别、脏区重绘等技术。

创新性

从swf文件直接转化为Html5动画(google的swiffy和adobe的flashcc都不支持); 精简编排的JSON数据,使swf转化后的js数据文件非常小,普遍比flashcc导出的要小20%到50%; 精简的运行库,混淆后只有35k,gzip后只有10k左右。而swiffy和flashcc的运行库混淆后都超过100K。

研发效率提高

使用fanvas转化swf实现H5动画比直接使用CSS3控制复杂动画要高效, 而且文件更小。以QQ健康之前一个pk动画为例,使用css3实现需要2天工作, 而使用fanvas只需要2小时内

使用fanvas还可以让很多以flash为动画源文件的场景变得更方便。例如手机QQ魔法表情, 原来使用flash制作动画,然后转制成视频。这个过程复杂而且导出的视频文件较大(1M以上), 而采用Fanvas技术实现H5动画,不需要转制视频,而且最终文件小(平均比视频优化50%)。