[原生js] CSS或JS实现gif动态图片的停止与播放

jack · 发表于 2016-3-17 06:06:57

对于习惯性刷微博的我，总时不时会看到类似下面的游戏：

　　测测你和小白(白百何)有哪些共同点，戳开动图，最先看清的词是什么?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来回切换的src值为这两张图片地址就好了。

　　此方法甚简单，我就不放实例了。

img.src="animate.gif";
// 或者呈现的是
img.src="static.png";

复制代码

　　这个方法最大的优点就是兼容性强，所有浏览器都可以实现停止效果。然而，这种方法有个局限，就是，暂停时候呈现的图片永远是同一张。基本上可以说是停止，而不是暂停。

　　那有没有什么方法可以真正意义上的暂停呢?还真有!

　　gif图片自己可控前提下的方法二：CSS3 animation控制

　　也就是我们看到的gif效果并不是一个真正的gif图片，而是使用CSS3的animation属性控制形成的逐帧动态图片效果。说穿了就是animation控制Sprites图片的background-position值模拟gif效果。

　　例如，新版twitter的Like的效果，貌似就有使用该技术：

　　使用CSS3 animation实现类gif效果的好处在于，图片可以无损，且我们可以很轻松地控制图片动画的暂停和播放，使用的是：animation-play-state: paused;这个声明。

　　点击demo页面的暂停按钮，您会发现，直接就停住了，如下截图示意，截自IE10浏览器：

　　再次点击，就会在暂停画面之后继续播放了。从而实现了我们对动画图片的精确控制效果。

　　此方法看上去完美，但是，1. IE10+等支持CSS3 animation的浏览器才行;2. 最大的问题是图片需要是自己控制，如果想控制用户上传的真正意义的gif图片，只能……望洋兴叹……………………吗?

　　自己无法控制的gif图片的停止与播放

　　比方说，页面上用户上传了些gif图片，哎呀，闪瞎了我的中华田园眼，我要全部暂停，肿么办?如果后台同学没有对gif进行静态处理，此时，只能靠前端小伙伴，有什么办法吗?

　　有一个。HTML5 canvas可以读取图片信息，绘制当前图片。于是可以实现图片马赛克，模糊，色值过滤等很多图片特效。我们这里不用那么复杂，只要读取我们的图片，重绘下就可以。

　　点击按钮，然后：

　　如何使用?

　　我对HTMLImageElement原型进行了扩展，增加了stop()和play()两个方法，如下：

if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width & height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}

复制代码

　　大家只要在页面中自己的JS文件中复制上面的代码，然后就可以直接：

var image = document.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();

复制代码

　　//zxx: 上面代码并未详尽测试，以及可能的体验问题(IE闪动)没有具体处理(影响原理示意)，若要实际使用，需要自己再微调完美下。

　　不足

　　1. IE9+支持。IE7/IE8不支持canvas没搞头。

　　2. 只能停止gif，不能真正意义的暂停。因为canvas获得的gif图片信息为第一帧的信息，后面的貌似获取不到。要想实现暂停，而不是停止，还需要进一步研究，如果你有方法，非常欢迎分享。

　　结束语

　　是胡不是霍，是霍躲不过!哈哈!

　　上面这个gif也是demo示意gif强力候选。后来一琢磨，看我文章的还是宅男多，腐女少，所以，你懂的……

　　——我是多年不见的低调的分隔线—–

　　本文gif比较多，如果您是移动设备查看本文，会发现，怎么我的电池怎么越来越瘦了!不是因为天冷冻小了，而是gif比较耗电。所以，从这个角度讲，我们其实有必要在移动端默认停止这些gif的播放，用户点击再播放。一来省流量，二来省电。

　　如果没有静态图片资源支持，那不妨试试文章出现的一些方法

		自动登录	找回密码
密码			立即注册