一键把SWF转HTML5 canvas动画的工具-Fanvas

什么是Fanvas？

Fanvas是一个把swf转为html5 canvas动画的系统，由两部分组成：Actionscript实现的解析器、js运行库。

Flash做动画是最成熟最高效的方式，但由于终端基本不支持Flash播放，这给终端的动画制作带来了不少麻烦。 Fanvas是Flash和Canvas的完美结合，可以把swf（包括矢量和位图）完美地转化为canvas动画，让美术妹子一次制作，到处运行。。。

Fanvas的技术难点？

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

Fanvas的优势？

能转化swf为H5动画的工具，除了Fanvas还有大名鼎鼎的google和adobe的产品——swiffy和flashcc。 对比之下，Fanvas有如下优势：

  1. 从swf文件直接转化为Html5动画（google的swiffy和adobe的flashcc都不支持，两个产品都需要通过fla源文件处理）；
  2. 精简编排的JSON数据，使swf转化后的js数据文件非常小，普遍比flashcc导出的要小20%到50%；
  3. 精简的运行库，混淆后只有35k，gzip后只有10k左右。而swiffy和flashcc的运行库混淆后都超过100K;
  4. 开源，可供使用者二次开发（请保留Fanvas字样或版权声明）。

研发效率提高

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

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

如何使用Fanvas

素材规范

Fanvas 3.0能完美支持普通的Flash动画，并且加入了脏区重绘技术，运行效率更高。 使用方式略有改变，原来2.0动画能适配canvas的宽高，而3.0中，使用时不要设置canvas的width和height属性，因为fanvas会自动设置为动画的宽高的倍数（见初始化的scale参数）。 如果需要控制canvas在屏幕上的尺寸，请使用css。这有利于实现在移动端适配各种屏幕密度。 暂时不支持按钮、文本和补间形状，请在转化前检查fla中是否有按钮、文本或补间形状，需要先删除。 对于设计师而言，请把文本打散或使用图片代替，这样有利于特殊字体的使用，而补间形状这个功能使用率极低，也不建议使用。 如果在使用中有任何问题或者希望Fanvas加入新功能，欢迎联系kenko，邮箱是kenkofox@qq.com。

遮罩规范： 不再需要按照Fanvas 1.0规范，但受限于canvas 2d的机制，遮罩层只能是图形或形状，不能是影片剪辑。不过，这个限制并不影响实际设计，图形一样可以做时间轴变化。另外，由于Canvas动画不支持遮罩嵌套遮罩，所以flash中从舞台到最终元件只能有一次遮罩。

滤镜规范： 使用滤镜（包括色调变化）时，元件在舞台上可以做缓动变化，但元件内部不能有时间轴变化，因为该元件在第一帧会被截图缓存起来，后续以一张图代替该元件，所以元件内部的形变不会展示。这样做的原因是，逐帧不断做滤镜处理，canvas会吃不消。 特殊的是发光和投影，这两个由于是canvas原生支持的功能，所以不受上边滤镜规范限制。

Fanvas使用步骤

  1. 启动fanvas.swf程序，具体方法：先打开flashplayer_14_sa_debug.exe，拖入fanvas.swf
  2. 导入swf，导出data.js。该data.js代表了swf的数据。如果swf中有位图，将导出一个zip包，包含图片和js，不要修改图片名称，把图片部署到html同一层目录或者某个相对路径/绝对路径。
  3. 在目标网页中建一个canvas标签，设置canvas的宽高（可以跟原swf不一样，fanvas将拉伸显示）。或者直接把导出的文件覆盖到demo目录中，然后打开index即可。
  4. 引入fanvas-min.js，data.js，等dom完成后，调用fanvas.play即可。

play接受3个参数：

  • 第1个是canvas dom元素或者canvas的id。

  • 第2个是data.js里的变量名（打开data.js就会发现var swfData = {}的结构）。如果一个页面有多个动画，就需要让不同的data.js分别使用不同的变量名。

  • 第3个是播放配置，是一个对象，包括是否开启位图化缓存和图片的存放路径。

    <播放配置说明>
    • cache：0/1/2，默认0。控制是否把全部矢量图形在运行时位图化。位图化后运行效率会提高，但如果过程中改变canvas宽高或矢量图放大，会出现模糊。0表示不缓存，1表示以1倍缓存，2表示2倍缓存。2能获得更清晰的效果，但性能会较差。
    • autoPlay：true/false，默认true。false则让动画停在第一帧。后续需要调用resume让动画继续播放
    • clearAll：0/1，默认0。1表示不使用脏区重绘，改为全屏重绘，当动画出现播放瑕疵时，尝试改为全屏重绘。
    • showFPS：0/1，默认0。显示帧频。
    • scale：0.1~3.0，默认1。动画按照scale的倍数等比例放缩绘制，利用这个参数可以适配手机的屏幕密度，也可以适当降低scale让低端机型提高播放流畅度。
    • onFrame：function，动画播放过程中每帧都会回调此函数。函数第一个参数是已播放的帧数。
    • imagePath：图片的存放路径。可以不配置，表示图片跟html文件放在同一层目录。 例如当前html是 http:// www .abc .com/swf/1.html play函数传入”/imagePath1/”，则以<http:// www. abc. com/imagePath1/img0.jpg>拉取图片； 传入”./imagePath1/”，则以<http:// www. abc. com/swf/imagePath1/img0.jpg>拉取图片。 为了避免canvas跨域问题，需要图片跟html存放在同一域名中

Demo

<script type='text/javascript' src='./fanvas3-min.js'></script>
<script type='text/javascript' src='./demoData.js'></script>
<script>
function init() {
    fanvas.play('testCanvas', swfData, {cache:1, autoPlay:true, onFrame:null, imagePath:"./img/"});
}
</script>

Fanvas的播放控制接口

  • fanvas.replay：重头开始播放，传入canvas dom或者id，需要跟play方法对应；
  • fanvas.pause：暂停播放，传入canvas dom或者id，需要跟play方法对应。对于单页面App，建议删除canvas前先调用pause，让Timer停止，否则会造成内存泄漏和性能浪费；
  • fanvas.resume：恢复播放，传入canvas dom或者id，需要跟pause方法对应；
  • fanvas.gotoAndPlay：跳到某一帧播放，传入canvas dom或者id和帧号（从1开始）；
  • fanvas.gotoAndStop：跳到某一帧并停在那里，传入canvas dom或者id和帧号（从1开始）；

结合控制接口和onFrame，大家可以自由发挥做出更多有趣的效果。

开源地址

https://github.com/Tencent/Fanvas