新蒲京200.c软件下载-app官网网址 > 问答 >

中午在家相中央电台5

CSS或JS完成gif动态图表的截止与播音

2015/12/06 · CSS, JavaScript · gif

原稿出处: 张鑫旭   

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

早上出来买菜,正巧降雨了,还夹杂着冰珠子。鄙人民代表大会体,穿的是豆蔻梢头件秀气但单薄的风骚大衣,立马冻成了中华田园犬。原来布署去钓鱼的,科科,作罢,上午在家相中央电台5 克利夫兰骑士队vs新奥尔良鹈鹕,晚上补动画码代码做小说,好生安适。

图片 1

对此习贯性刷微博的本身,总时一时拜会到形似上面包车型地铁游玩:

测测你和小白(白百何(Bai BaiheState of Qatar卡塔尔国有如何协作点,戳开动图,最先看清的词是怎么?ie浏览器的同桌能够按esc键(或截屏State of Qatar,听别人讲在哪个词暂停,哪个词正是您哦!图片 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";

其生机勃勃措施最大的长处便是包容性强,全数浏览器都能够兑现停止效果。然则,这种方式有个局限,正是,暂停时候显示的图片恒久是平等张。基本上能够算得结束,实际不是暂停。

那有没有如何艺术能够真正含义上的中止呢?还真有!

三、gif图片自身可控前提下的章程二:CSS3 animation调整

也正是大家看出的gif效果实际不是一个当真的gif图片,而是利用CSS3的animation属性调整产生的逐帧动态图表效果。小编搜了下,@DO1路人乙有篇作品“css3-animation制作逐帧动漫”特地介绍了这种技艺。说穿了不畏animation调节百事可乐s图片的background-position值模拟gif效果。

比方,新版twitter的Like的效果与利益,貌似就有应用该技艺:
图片 4

利用CSS3 animation达成类gif效果的功利在于,图片可以无损,且大家得以很自在地操纵图片动漫的中断和播发,使用的是:animation-play-state: paused;本条宣称。

你可以狠狠地点击这里:采取CSS3 animation完结gif动图的暂停和广播demo

点击demo页面包车型大巴暂停按键,您会发现,直接就停住了,如下截图暗意,截自IE10浏览器:
图片 5

重新点击,就能够在暂停画面之后延续播放了。进而实现了作者们对动漫图片的确切调节效能。

此格局看起来完美,但是,1. IE10+等帮助CSS3 animation的浏览器才行;2. 最大的标题是图片需假使协和决定,借使想垄断(monopoly卡塔尔客商上传的实在乎义的gif图片,只好……高不可攀……………………吗?

四、自身无法调节的gif图片的停止与播音

举个例子说,页面上客商上传了些gif图片,哎哎,闪瞎了自身的中原田园眼,小编要全体抛锚,如何做?假诺后台同学未有对gif进行静态管理,当时,只可以靠前端小友人,有何样艺术啊?

有几个。HTML5 canvas可以读取图片新闻,绘制当前图片。于是能够达成图片斯特Russ堡克,模糊,色值过滤等好些个图纸特效。大家这里实际不是那么复杂,只要读取我们的图样,重绘下就能够。

你能够狠狠地方击这里:应用JS和canvas达成gif动图的终止和播发demo

点击开关,然后:
图片 6

图片 7

怎么样行使?
自己对HTMLImageElement原型实行了扩大,增加了stop()play()多少个艺术,如下:

if ('getContext' in document.createElement('canvas'State of Qatar卡塔尔(قطر‎ { 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(State of Qatar { 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.toDataUENVISIONL("image/gif"State of Qatar; } 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

上一篇:未经俺许可
下一篇:没有了