CSS或JS达成gif动态图表的终止与播音

2015/12/06 · CSS,
JavaScript ·
gif

初稿出处:
张鑫旭   

一、屋外:寒风吹,雪花飘;屋内:空调吹,代码飘

早晨出来买菜,正好降水了,还夹杂着冰珠子。鄙人概况,穿的是一件帅气但单薄的香艳大衣,立马冻成了中华田园犬。原来安插去钓鱼的,科科,作罢,早上在家看CCTV5
克利夫兰骑士队(Cleveland Cavaliers)vs鹈鹕队,深夜补动漫码代码做小说,好生惬意。

图片 1

对于习贯性刷天涯论坛的本身,总时不常会看到类似上面包车型大巴嬉戏:

测测你和小白(白百何(英文名:Bai Baihe))有如何共同点,戳开动图,起先看清的词是怎么样?ie浏览器的同桌能够按esc键(或截屏),听大人说在哪个词暂停,哪个词就是您哦!图片 2

图片 3

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”;

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

这几个方法最大的帮助和益处正是包容性强,全部浏览器都足以达成甘休效果。不过,这种措施有个局限,正是,暂停时候展现的图样恒久是同等张。基本上能够说是甘休,而不是暂停。

那有未有啥点子可以真正含义上的暂停呢?还真有!

上午在家看CCTV5。上午在家看CCTV5。三、gif图片自身可控前提下的章程二:CSS3 animation调控

上午在家看CCTV5。上午在家看CCTV5。也正是大家看看的gif效果并不是三个实在的gif图片,而是选取CSS3的animation属性调整产生的逐帧动态图片效果。作者搜了下,@DO1路人乙有篇小说“css3-animation制作逐帧动画”特地介绍了这种本事。说穿了固然animation调节七喜s图片的background-position值模拟gif效果。

比如说,新版twitter的Like的成效,貌似就有选用该本领:
图片 4

运用CSS3
animation达成类gif效果的裨益在于,图片能够无损,且大家得以很轻便地调节图片动画的间歇和播音,使用的是:animation-play-state: paused;上午在家看CCTV5。以此宣称。

您能够狠狠地方击这里:行使CSS3
animation完结gif动图的中止和播发demo

点击demo页面包车型大巴中止开关,您会发觉,直接就停住了,如下截图暗中提示,截自IE10浏览器:
图片 5

重复点击,就能在脚刹踏板画面之后一而再播放了。从而完毕了大家对动画图片的可相信调节机能。

此措施看起来完美,不过,1. IE10+等帮助CSS3 animation的浏览器才行;2.
最大的主题素材是图形需纵然本身主宰,若是想操纵用户上传的实在意义的gif图片,只好……望尘莫及……………………吗?

四、自身不能调控的gif图片的终止与广播

比方说,页面上用户上传了些gif图片,哎哎,闪瞎了小编的中华人民共和国田园眼,小编要原原本本抛锚,怎么做?要是后台同学未有对gif进行静态管理,此时,只好靠前端小同伙,有怎么样艺术啊?

有八个。HTML5
canvas能够读取图片音信,绘制当前图片。于是能够达成图片台北克,模糊,色值过滤等多数图纸特效。我们这里并非那么复杂,只要读取我们的图片,重绘下就足以。

上午在家看CCTV5。你能够狠狠地方击这里:使用JS和canvas完毕gif动图的停下和播发demo

点击按键,然后:
图片 6

图片 7

怎么着选用?
本身对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.toDataU途锐L(“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; } }
}; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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();

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

//zxx:
上边代码并未有详细测量试验,以及大概的经验难点(IE闪动)未有实际管理(影响原理暗暗表示),若要实际运用,供给本人再微调完美下。

不足

  1. IE9+支持。IE7/IE8不支持canvas没搞头。
    2.
    不得不甘休gif,无法确实含义的中断。因为canvas获得的gif图片音讯为第一帧的音讯,前面包车型地铁相似获取不到。要想达成暂停,而不是截止,还须要特别探讨,假如你有法子,特别欢迎分享。

五、结束语

是胡不是霍,是霍躲不过!哈哈!
图片 8
地方这一个gif也是demo暗指gif强力候选。后来一斟酌,看本人小说的依然土冒多,御宅女少,所以,你懂的……
图片 9

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

正文gif相比较多,假诺你是移动设备查看本文,会开掘,怎么笔者的电瓶怎么越来越瘦了!不是因为天冷冻小了,而是gif比较功耗。所以,从这一个角度讲,大家实际有须要在活动端默感到止那个gif的播报,用户点击再播放。一来省流量,二来省电。

即便未有静态图片能源支撑,那不妨试试小说出现的有的方法,有心得记得来此处反映哈!
图片 10

末尾,本文的不二秘籍都以有弱点的,自个儿也绝非在其实项目中使用过。由此,要是阅读本文的您:

  1. 有更宏观的gif暂停与广播形式;
  2. 发掘文中方法有欠缺和疏漏;

都极度愿意得以不吝赐教!

多谢阅读!周末采暖!

 

1 赞 6 收藏
评论

图片 11

相关文章