flash动画转html5 效果,一键把SWF转HTML5 canvas动画的工具-Fanvas
什么是Fanvas?
Fanvas是一个把swf转为html5 canvas动画的系统,由两部分组成:Actionscript实现的解析器、js运行库。
Flash做动画是最成熟最高效的方式,但由于终端基本不支持Flash播放,这给终端的动画制作带来了不少麻烦。
Fanvas是Flash和Canvas的完美结合,可以把swf(包括矢量和位图)完美地转化为canvas动画,让美术妹子一次制作,到处运行。。。
Fanvas的技术难点?
兼容swf的各种格式,主要是各种矢量命令和多种多样的图片格式;
实现高效的html5运行库,自主实现了位图缓存、自动脏区识别、脏区重绘等技术。
Fanvas的优势?
能转化swf为H5动画的工具,除了Fanvas还有大名鼎鼎的google和adobe的产品——swiffy和flashcc。
对比之下,Fanvas有如下优势:
从swf文件直接转化为Html5动画(google的swiffy和adobe的flashcc都不支持,两个产品都需要通过fla源文件处理);
精简编排的JSON数据,使swf转化后的js数据文件非常小,普遍比flashcc导出的要小20%到50%;
精简的运行库,混淆后只有35k,gzip后只有10k左右。而swiffy和flashcc的运行库混淆后都超过100K;
开源,可供使用者二次开发(请保留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使用步骤
启动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/”,则以拉取图片;
传入”./imagePath1/”,则以拉取图片。
为了避免canvas跨域问题,需要图片跟html存放在同一域名中
Demo
function init() {
fanvas.play('testCanvas', swfData, {cache:1, autoPlay:true, onFrame:null, imagePath:"./img/"});
}
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,大家可以自由发挥做出更多有趣的效果。
开源地址
flash动画转html5 效果,一键把SWF转HTML5 canvas动画的工具-Fanvas相关推荐
- Unity3D中暂停时的动画及粒子效果实现
暂停是游戏中经常出现的功能,而Unity3D中对于暂停的处理并不是很理想.一般的做法是将Time.timeScale设置为0.Unity的文档中对于这种情况有以下描述: The scale at wh ...
- 5、每周一点canvas动画--速度
查看全文 http://www.taodudu.cc/news/show-5250190.html 相关文章: 9个非常有趣的HTML5 Canvas动画特效合集 小程序直播-疯狂点赞Canvas动画 ...
- h5动画 php,GitHub - calcyu/wechat_html5_animate: 微信上的HTML5动画,类似易企秀效果。...
wechat_html5_animate ##微信上的HTML5动画,类似易企秀效果. ##制作HTML5动画的动机 微信上收到了一个可以编辑祝福语的拜年H5,故想尝试一下如何制作. ##制作工具 A ...
- html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, ...
- 效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...
- html5canvas效果跳一跳小游戏,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- html将图片动画效果,8款精美的HTML5图片动画分享
原标题:8款精美的HTML5图片动画分享 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图片效果的渲染.本文将分享8款精美的HTML5图片 ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
最新文章
- python封装api linux_python Socket编程-python API 与 Linux Socket API之间的关系
- 【清华集训2017】榕树之心
- tensorflow学习(7. GAN实现MNIST分类)
- php项目使用xdebug远程调试
- Keil C51,内存与指针
- CF1088F Ehab and a weird weight formula(树上最优性问题、贪心+倍增)
- Python中使用中文
- 密码学原理与实践_到底什么是防火墙入侵检测密码学身份认证?如何高效建立网络安全知识体系?...
- Python学习笔记:动态添加与删除属性与方法
- 李迟2021年7月知识总结
- python模块之logging模块
- 复杂网络学习的一些常用数据集
- android 4g wifi热点,全网通吃!中兴MF910S 4G无线热点上手体验
- 迅雷下载提示:应版权方要求/包含违规内容, 文件无法下载
- ubuntu nvidia驱动更新
- svg 右键意见删除cvs_一种实现svg自定义鼠标右键菜单的方法
- 开源多云应用平台 Choerodon猪齿鱼发布0.14版本
- 2023年京东炸年兽脚本《京东炸年兽活动脚本》
- GTX1650Super和GTX1060哪个好?
- 新版Q绑查询HTML源码
热门文章
- 0x80070079信号灯超时_[修复]错误0x80070079:信号量超时期限已过 | MOS86
- diy的电流电压表,高频率采集,上位机同步显示
- 【unity3d游戏源码及软件】部分展示之:超级马里奥unity源码,内附更多源码
- ANSYS——网格划分的不同方法以及GUI模块的操作(自由网格、映射网格、扫掠、拖拉)
- 文献笔记01 -- 综述 基于深度学习的入侵检测模型综述_张昊
- FTP客户端-C++
- matlab 画电路图,硬件大杀器:能画PCB还能替代MATLAB?!
- Matlab:实现菲涅尔矩形孔衍射仿真
- 自动驾驶实习/校招 增补企业名单
- 【通信原理 入坑之路】 —— 深入理解BPSK调制和解调的全过程及其Matlab实现