Fanvas, 把swf文件转html5 canvas js软件工具程序

子车安和

2023-12-01

Fanvas, 把swf文件转html5 canvas js软件工具程序

什么是Fanvas？

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

Flash做动画是最成熟最高效的方式，但由于终端基本不支持Flash播放，这给终端的动画制作带来了不少麻烦。

Fanvas是Flash和Canvas的完美结合，可以把swf（包括矢量和位图）完美地转化为canvas动画，让美术妹子一次制作，到处运行。。。

嘿嘿~~~让美术妹子也搭上H5的快车。

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;

如何使用？

只需要一键导入swf，转化完成后一键导出canvas动画js。

具体请参考bin目录的《使用说明》

源代码说明

exporter是as3.0实现的swf文件解析器，解析后输出json数据；

runtime是js运行库，用于解析json数据，转化为最终canvas动画。

素材规范

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使用步骤

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

Fanvas, 把swf文件转html5 canvas js软件工具程序