新闻动态
CSS或JS实现gif动态图片的停止与播放
添加时间:2020-06-30 07:48

  授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!

  授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。

  elementUI select下拉框在ios移动端需要点击两次才能选中

  vue中使用data中的数据a给赋值给另外一个变量b,改变a或b的值,另一个对象也变化的解决方法

  weixin_37875969:解决了我的疑惑,select是从官网粘贴过来的,没有prop,后端搞这些还是太业余,慢慢踩。

  测测你和小白(白百何)有哪些共同点,戳开动图,最先看清的词是什么?ie浏览器的同学可以按esc键(或截屏),据说在哪个词暂停,哪个词就是你哦!

  OK, 这里出现一个浏览器特性,就是通过ESC快捷键,暂停gif的播放。据说FireFox浏览器以前也有,后来被干掉了,根据@紫云妃的说法是:

  是这样的,Firefox原来的表现是:在页面load事件完成,同时x按钮变成刷新按钮之后,esc仍然有几个作用,中断当前正在发送的ajax,websocket,停止gif,apng动画的播放.但这些功能太小众了,影响了普通用户的使用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载完成后,esc键完全失效.

  然而,这种隐晦的但似乎会影响正常功能的小技巧显然是无法实现真正意义上的gif动态图片的停止与播放的。一是兼容性,二是功能性,三是移动端没有ESC键。

  所以,如果我们遇到需要可以随时随地停止gif动态图片播放的需求的时候,就需要寻找其他的出路。好,寒冬里的暖身结束,开始进入正题~~

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

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

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

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

  您可以狠狠地点击这里:使用CSS3 animation实现gif动图的暂停和播放demo

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

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

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

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

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

  您可以狠狠地点击这里:使用JS和canvas实现gif动图的停止和播放demo

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

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

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

  如果没有静态图片资源支持,那不妨试试文章出现的一些方法,有心得记得来这里反馈哈!

  最后,本文的方法都是有瑕疵的,自己也尚未在实际项目中使用过。因此,假如阅读本文的您:

  平时看到各种影视剧或者视频的时候,总会想把把视频最精华的片段或者自己喜欢的部分做成

  动图而且我刚开始用的时候,也会觉得操作起来比较简单~所以小白也是可以放心使用的。我整理了把视频做成高清的

  图的技巧,现在来分享给大家吧~1.导入你的视频打开软件之后,选择“视频转换通”的功能。然后点击“添加待转换视频”......

  图!记录下过程!1.首先我们打开PS,然后(Ctrl + N)新建一个项目!2.将我们需要的素材托到PS中,让后调整下大小,确定!然后在图层选项卡中就会出现我们添加的

  了!我们多添加几个,像这样!然后点迹菜单栏的窗口,选中其中的时间轴,打开时间轴选项卡!然后点迹创建帧动画! 我们将当前......

AG手机官方 电话:18663990883
地址:青岛市黄岛区王台镇驻地
联系人:任经理
Copyright ©2015-2019 AG手机官方,AG手机官方 版权所有 
网站地图
AG手机官方 AG手机官方 AG手机官方