Html如何处理序列帧动画？

水木社区手机版

主题:Html如何处理序列帧动画？
楼主|baddif|2014-09-14 15:35:13|展开
我现在有一系列图片，连起来是一个小动画，每秒26帧的重复。
显示端是pc，firefox。
现在的做法是，
在网页中设置一个定时器，每30毫秒换张图，
但是这样性能不好，而且有时会有跳帧的现象。

请问这个应该如何处理？也可以考虑转成flv或者swf的格式，
不过要求背景透明，似乎就不能转了。
Core Animation似乎是做动画的，不知道序列帧处理得怎么样。

求指点，谢谢。
--
FROM 101.36.78.*
3楼|baddif|2014-09-14 17:50:54|展开
多谢，我找找看。
网页就是纯粹的js+html，
切换图片就用的window.setInterval("change()",30)这种形式。。。
新手摸索中。。。
【在 starryin (starryin) 的大作中提到: 】
: 为啥是26帧？
: 你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
: 另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
: ...................
--
FROM 101.36.78.*
4楼|baddif|2014-09-14 17:53:03|展开
不需要，不过要是能搞定支持一下也没啥不可以的。。。
【在 Coooold (COoOold) 的大作中提到: 】
: 需要支持ie不，可以用css sprite来搞
--
FROM 101.36.78.*
5楼|baddif|2014-09-14 20:02:28|展开
切换图片我用的是document.getElementById("img").src="img/0x.png"的方式，
应该是消耗很大的吧。
【在 starryin (starryin) 的大作中提到: 】
: 为啥是26帧？
: 你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
: 另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
: ...................
--
FROM 101.36.78.*
10楼|baddif|2014-09-15 13:24:09|展开
多谢，我准备就这样搞了。
是不是一般的做法是用一个canvas，然后不同帧的图片重新绘制，而不是直接更换img的src？
我试了一下，用canvas确实流畅了些，不知道在别的电脑上如何，客户的电脑比较差。
另外还有个问题，我在网上看到说为了节约资源，要重绘canvas而不是重绘img，这个是什么意思？每次把现有的canvas删掉重新创建一个？
我看到的来源是这里：http://www.cnblogs.com/iamzhanglei/archive/2011/11/29/2267868.html
【在 kobe2000 的大作中提到: 】
: 是的
: 最好弄26个img，全部加载好，然后用js控制显示与否
:
--
FROM 116.247.98.*