小tips: CSS或JS实现gif动态图片的停止与播放

前端应用 Views
说到SS或JS实现gif动态图片的停止与播放,我在刷微博或图片站的时候 经常看到有些图片显示“loading”字样,就是让你去点他,她才播放给你看....

一、如图

二、gif图片自己可控前提下的方法一:多img资源控制处理

假如说,我们希望暂停的gif是自己(开发人员)传上去的,不是用户可以随机上传不可控的gif. 我们可以这么处理,就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片。然后使用JS来回切换src值为这两张图片地址就好了。

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

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

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

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

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

也就是我们看到的gif效果并不是一个真正的gif图片,而是使用CSS3的animation属性控制形成的逐帧动态图片效果。我搜了下,@DO1路人乙有篇文章“css3-animation制作逐帧动画”专门介绍了这种技术。说穿了就是animation控制Sprites图片的background-position值模拟gif效果。

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

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

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

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

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

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

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

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

点击按钮,然后:
gif停止中

gif图片播放中……

如何使用?
我对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图片信息为第一帧的信息,后面的貌似获取不到。要想实现暂停,而不是停止,还需要进一步研究,如果你有方法,非常欢迎分享。

下 载 人已下载

下载说明:

1、解压密码:无

2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。

3、如果您发现文件有错,或者您有其他更好的意见、建议请给我们留言,我们会及时处理!

4、如果您遇到什么问题,也可加入本站QQ1828984798咨询!

*下载本站资源以及作品仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *

评论 --
  • 消灭零回复