一、
对于习惯性刷微博的我,总时不时会看到类似下面的游戏:
测测你和小白(白百何)有哪些共同点,戳开动图,最先看清的词是什么?ie浏览器的同学可以按esc键(或截屏),据说在哪个词暂停,哪个词就是你哦!
OK, 这里出现一个浏览器特性,就是通过ESC快捷键,暂停gif的播放。据说FireFox浏览器以前也有,后来被干掉了,根据@紫云妃的说法是:
是这样的,Firefox原来的表现是:在页面load事件完成,同时x按钮变成刷新按钮之后,esc仍然有几个作用,中断当前正在发送的ajax,websocket,停止gif,apng动画的播放.但这些功能太小众了,影响了普通用户的使用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载完成后,esc键完全失效.
然而,这种隐晦的但似乎会影响正常功能的小技巧显然是无法实现真正意义上的gif动态图片的停止与播放的。一是兼容性,二是功能性,三是移动端没有ESC键。
所以,如果我们遇到需要可以随时随地停止gif动态图片播放的需求的时候,就需要寻找其他的出路。好,寒冬里的暖身结束,开始进入正题~~
二、gif图片自己可控前提下的方法一:多img资源控制处理
假如说,我们希望暂停的gif是自己(开发人员)传上去的,不是用户可以随机上传不可控的gif. 我们可以这么处理,就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片。然后使用JS来回切换<img>
的src
值为这两张图片地址就好了。
此方法甚简单,我就不放实例了。
img.src="animate.gif"; // 或者呈现的是 img.src="static.png";
这个方法最大的优点就是兼容性强,所有浏览器都可以实现停止效果。然而,这种方法有个局限,就是,暂停时候呈现的图片永远是同一张。基本上可以说是停止,而不是暂停。
那有没有什么方法可以真正意义上的暂停呢?还真有!
三、gif图片自己可控前提下的方法二:CSS3 animation控制
例如,新版twitter的Like的效果,貌似就有使用该技术:
使用CSS3 animation实现类gif效果的好处在于,图片可以无损,且我们可以很轻松地控制图片动画的暂停和播放,使用的是:animation-play-state: paused;
这个声明。
点击demo页面的暂停按钮,您会发现,直接就停住了,如下截图示意,截自IE10浏览器:
再次点击,就会在暂停画面之后继续播放了。从而实现了我们对动画图片的精确控制效果。
此方法看上去完美,但是,1. IE10+等支持CSS3 animation的浏览器才行;2. 最大的问题是图片需要是自己控制,如果想控制用户上传的真正意义的gif图片,只能……望洋兴叹……………………吗?
四、自己无法控制的gif图片的停止与播放
比方说,页面上用户上传了些gif图片,哎呀,闪瞎了我的中华田园眼,我要全部暂停,肿么办?如果后台同学没有对gif进行静态处理,此时,只能靠前端小伙伴,有什么办法吗?
有一个。HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。
您可以狠狠地点击这里:使用JS和canvas实现gif动图的停止和播放demo
点击按钮,然后:
如何使用?
我对HTMLImageElement原型进行了扩展,增加了stop()
和play()
两个方法,如下:
大家只要在页面中自己的JS文件中复制上面的代码,然后就可以直接:
var image = document.getElementsByTagName("img")[0]; // 停止gif图片 image.stop(); // 播放gif图片 image.play();
//zxx: 上面代码并未详尽测试,以及可能的体验问题(IE闪动)没有具体处理(影响原理示意),若要实际使用,需要自己再微调完美下。