- 主题:[求助]关于gif图片的播放及一些引申问题
半路出家，自己摸索，知识不成系统，有些可能非常简单的问题也处理得磕磕绊绊的，求指教。
基本问题：
比如我在页面上放了一个只播放一次的gif，然后需要根据事件触发重新播放的功能。目前知道的重新播放的方法（没有使用gif控制器等第三方的东东），是直接在js里用Img对象的.src="xxx.gif"这种方式。出现的问题是：当gif加载过于频繁或者过多时，偶尔会有播放不成功的情况，大概与机器本身的性能有关。
这一问题怎么解决呢？
如果用gif预加载的方法，似乎是没办法重新播放的；
之前考虑过不用gif，直接在js里切换序列帧，但是一秒切24次是不现实的；
不能用swf或者其它格式，因为需要透明背景。
这个问题有什么解决方案吗？
进一步的问题：
canves动画的性能如何，一秒绘制24帧，可行吗？
是不是要考虑在js中用线程来处理？
另外我这个思路是不是方向本身就不对，不应该这么做？
求指教！
--
FROM 140.207.146.*
图像加载完毕再显示啊，给图像个onload
--
FROM 111.204.241.*
谢谢指点，不过不是这个逻辑。
我要实现的功能类似于游戏：
点击一个按钮，就发射一发子弹。子弹打到另一边的人，另一边的人倒下。
发射是一个gif，人倒下是另一个gif。子弹飞行时间固定，点击按钮先播放第一个gif，用setTimeout方式来播放第二个gif。
所以不能用这种方式处理的。
我一直在想，是不是用gif这个思路本身就是有问题的。
【 在 zzjyingzi 的大作中提到: 】
: 图像加载完毕再显示啊，给图像个onload
--
FROM 140.207.146.*
canvas吧还是。。
如果再复杂了，flash吧。
【 在 baddif (Fire of my loins) 的大作中提到: 】
: 谢谢指点，不过不是这个逻辑。
: 我要实现的功能类似于游戏：
: 点击一个按钮，就发射一发子弹。子弹打到另一边的人，另一边的人倒下。
: ...................
--
FROM 61.149.246.98
flash不支持透明吧？
是不是要做成像以前很火的那种flash小游戏的方式？
canvas这个，我看到的动画方法都是把原来的用白矩形覆盖再重画一张图上去的形式。这种方法效率如何呢？图片数量多的话，能达到1秒24帧的程度吗？
【 在 shaolin 的大作中提到: 】
: canvas吧还是。。
: 如果再复杂了，flash吧。
--
FROM 183.131.116.*
假如按页面加载的话，加载时间可以不在意，但是gif的播放时间得严格计算。
貌似js有10ms的运行间隔。
所以setTimeout无法精确改变状态，累积起来时间误差就多了，再加上需要判断射击状态。
不如对子弹运行的状态变化加以划分，按照逻辑来描述状态的变化。
canvas刷新帧数在手机上无法顺利运行，按照流畅度来说，1000/60是兼顾动画流畅和浏览器刷新频率的。
【 在 baddif 的大作中提到: 】
: 谢谢指点，不过不是这个逻辑。
: 我要实现的功能类似于游戏：
: 点击一个按钮，就发射一发子弹。子弹打到另一边的人，另一边的人倒下。
: ...................
--
FROM 111.192.105.*
不用gif
子弹发射用一个层的背景，改变层位置
倒下想办法用css的变形和动画
【 在 baddif (Fire of my loins) 的大作中提到: 】
: 谢谢指点，不过不是这个逻辑。
: 我要实现的功能类似于游戏：
: 点击一个按钮，就发射一发子弹。子弹打到另一边的人，另一边的人倒下。
: ...................
--
FROM 117.114.129.*
我先想到的是css旋转，后来觉得lz不要这么low的动画吧。。
【 在 aotian (aotian) 的大作中提到: 】
: 不用gif
: 子弹发射用一个层的背景，改变层位置
: 倒下想办法用css的变形和动画
: ...................
--
FROM 61.149.246.98
requestAnimationFrame
【 在 zzjyingzi (十六点五) 的大作中提到: 】
: 假如按页面加载的话，加载时间可以不在意，但是gif的播放时间得严格计算。
: 貌似js有10ms的运行间隔。
: 所以setTimeout无法精确改变状态，累积起来时间误差就多了，再加上需要判断射击状态。
: ...................
--
FROM 180.173.161.*
【 在 baddif (Fire of my loins) 的大作中提到: 】
: flash不支持透明吧？
: 是不是要做成像以前很火的那种flash小游戏的方式？
: canvas这个，我看到的动画方法都是把原来的用白矩形覆盖再重画一张图上去的形式。这种方法效率如何呢？图片数量多的话，能达到1秒24帧的程度吗？
no need to fill white first.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
always draw in an ImageData object, and put to canvas only when finished.
this is like "double buffer", and is possible to be v-synced by the browser.
: ...................
--
FROM 180.173.161.*