Fanvas是可以把FLASH的 SWF(包括矢量和位图)转化为 HTML5 Canvas 动画的开源利器,Flash做动画是成熟高效的方式之一,但很多终端不支持Flash播放,给美工们带来了不少麻烦。借助Fanvas,可以让美工们搭上H5的快车, 一次制作FLASH,即可到处运行。

特色:

1、从swf文件直接转化为Html5动画;

2、精简编排的JSON数据,使swf转化后的js数据文件非常小;

3、精简的运行库,混淆后只有35k,gzip后只有10k左右。

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即可。

Demo演示:

http://kenkozheng.github.io/fanvas/magicEmotion/demo1/

http://kenkozheng.github.io/fanvas/magicEmotion/demo2/

http://kenkozheng.github.io/fanvas/magicEmotion/demo3/

http://kenkozheng.github.io/fanvas/magicEmotion/demo4/