- 主题:Html如何处理序列帧动画？
我现在有一系列图片，连起来是一个小动画，每秒26帧的重复。
显示端是pc，firefox。
现在的做法是，
在网页中设置一个定时器，每30毫秒换张图，
但是这样性能不好，而且有时会有跳帧的现象。
请问这个应该如何处理？也可以考虑转成flv或者swf的格式，
不过要求背景透明，似乎就不能转了。
Core Animation似乎是做动画的，不知道序列帧处理得怎么样。
求指点，谢谢。
--
FROM 101.36.78.*
为啥是26帧？
你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
【 在 baddif 的大作中提到: 】
: 我现在有一系列图片，连起来是一个小动画，每秒26帧的重复。
: 显示端是pc，firefox。
: 现在的做法是，
: ...................
--
FROM 218.22.21.*
需要支持ie不，可以用css sprite来搞
【 在 baddif (Fire of my loins) 的大作中提到: 】
: 我现在有一系列图片，连起来是一个小动画，每秒26帧的重复。
: 显示端是pc，firefox。
: 现在的做法是，
: ...................
--
修改:Coooold FROM 61.149.86.*
FROM 61.149.86.*
多谢，我找找看。
网页就是纯粹的js+html，
切换图片就用的window.setInterval("change()",30)这种形式。。。
新手摸索中。。。
【 在 starryin (starryin) 的大作中提到: 】
: 为啥是26帧？
: 你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
: 另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
: ...................
--
FROM 101.36.78.*
不需要，不过要是能搞定支持一下也没啥不可以的。。。
【 在 Coooold (COoOold) 的大作中提到: 】
: 需要支持ie不，可以用css sprite来搞
--
FROM 101.36.78.*
切换图片我用的是document.getElementById("img").src="img/0x.png"的方式，
应该是消耗很大的吧。
【 在 starryin (starryin) 的大作中提到: 】
: 为啥是26帧？
: 你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
: 另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
: ...................
--
FROM 101.36.78.*
你用firebug看看，这个操作可能会产生http请求
不如全部提前加载进来
【 在 baddif (Fire of my loins) 的大作中提到: 】
: 切换图片我用的是document.getElementById("img").src="img/0x.png"的方式，
: 应该是消耗很大的吧。
--
FROM 221.222.146.*
android的canvas怎么保持帧数？
做个canvas在ios上面巨坑，一帧一帧的跳，据说android上面更差
【 在 starryin 的大作中提到: 】
: 为啥是26帧？
: 你可以看看requestanimationframe这个api，应该是每秒60帧，不过也见过安卓浏览器上每秒只有30，这个可能解决跳帧的问题
: 另外你切换图片怎么弄的？对dom操作还是扔进一个canvas里了
: ...................
--
FROM 125.39.8.*
这个我不清楚，我也是看别人的demo
那个demo里ios能保持60帧，我那台渣android 4.0上chrome是30帧，自带浏览器只有十几帧
做hydrid app的话可以考虑包个crosswalk，自带chromium
【 在 zzjyingzi 的大作中提到: 】
: android的canvas怎么保持帧数？
: 做个canvas在ios上面巨坑，一帧一帧的跳，据说android上面更差
:
--
FROM 218.22.21.*
是的
最好弄26个img，全部加载好，然后用js控制显示与否
【 在 baddif (Fire of my loins) 的大作中提到: 】
: 切换图片我用的是document.getElementById("img").src="img/0x.png"的方式，
: 应该是消耗很大的吧。
--
FROM 114.251.89.*