gif动态图gif出处_我喜欢GIF的怪异事物

gif动态图gif出处

I was recently reminded that I never wrote down all the weird things I learned about the GIF file format when implementing GIF decoding/playback at work last year. (I was reminded of this because I wrote a line in a corporate blog post draft that started with “If there’s one thing I love more than debugging rendering bugs, it’s reading specs about internet technologies,” and someone thought surely I was being sarcastic. I was not!) Without further ado, some strange things about GIFs (hard G because language evolves):

最近,我想起了我去年在工作中实施GIF解码/播放时从未写下过关于GIF文件格式的所有奇怪知识。 (我之所以被提醒,是因为我在公司博客文章草稿中写了一行,开头是“如果我除调试渲染错误外还爱上一件事,那就是在阅读有关互联网技术的规范,”有人认为我在讽刺。我不是!)事不宜迟,关于GIF的一些奇怪的事情(由于语言不断发展,所以用了硬G):

GIF中使用的压缩算法早在一天前就获得专利保护, (The compression algorithm used in GIFs was, way back in the day, under patent,)

and in the 90s, some kerfuffles ensued about this, resulting in someone inventing PNG. PNG used to be PING, which stood for “Ping Is Not GIF.”

在90年代,随之而来的是一些混混,导致有人发明了PNG。 PNG以前是PING,代表“ Ping不是GIF”。

GIF规范提供了对多张图像进行编码的功能,但没人能将其编码(The GIF spec provides for encoding multiple images, but no one ever codified what this meant.)

The most common usage of this is, of course, encoding multiple images to yield an animating image. But you could also use it to fit lots of colors into one image (since each image maxes out at 256 colors)! [See here.]

当然,最常见的用法是对多个图像进行编码以生成动画图像。 但是您也可以使用它在一张图像中放入很多颜色(因为每个图像最多可以容纳256色)! [ 见这里。 ]

后来的扩展(Netscape应用程序块)引入了“循环计数”的概念,以指示动画图像应循环多少次。 (A later extension (the Netscape Application Block) introduced the concept of “loop count,” to indicate how many times the animating image should loop.)

If you read this and think “loop count=1 loops once,” you would not be alone, and you’d be wrong:

如果您阅读此书并认为“ loop count=1循环一次”,您将不会孤单,而且您会错:

|| loop count         || GIF plays N times      ||
||--------------------||------------------------||
|| unset || 1 ||
|| 0 || infinite ||
|| 1 || 2 ||
|| 2 || 3 ||

A value of 0 causes the GIF to loop infinitely; otherwise, browsers choose to interpret this value as “play the GIF once, then play n=loop more times” (an alternative interpretation might have been something like “play the GIF n times,” but then there are two different ways to play the GIF once, which is a bit weird).

值为0会使GIF无限循环。 否则,浏览器选择来解释这个值作为“玩GIF一次,然后打n=loop多次”(另一种解释可能是类似“打GIF n次,”但当时有两种不同的方式玩GIF一次,这有点奇怪)。

GIF帧具有一个指示帧延迟的字段(即,在继续下一帧之前显示此帧的时间)。 (GIF frames have a field to indicate frame delay (i.e. how long to show this frame before moving on to the next one).)

But (in the interest of saving space), delays are encoded in hundredths of a second, not milliseconds, so 100 indicates one full second, which is a little strange.

但是(为了节省空间),延迟以百分之一秒而不是毫秒为单位进行编码,因此100表示一整秒,这有点奇怪。

It gets weirder: in the old days of the internet, a bunch of newfangled advertisers tried to make really annoying ad images by encoding super fast frames to flash wildly at people. Browser vendors decided this was not cool (and would kill browser performance, at that time), so at some point someone decided not to show frames with delays of <11 milliseconds, and to correct those frames by setting those delays to 100 milliseconds, and now this is what all GIF renderers do. So a frame encoded with delay=2 will render 5x faster than a frame encoded with delay=1 or delay=0. (See: [old Chromium bug with a Star Trek test case], [Webkit patch], [some Chromium code]). Here, then, is a GIF with delays encoded to 1 (10 milliseconds):

它变得越来越奇怪:在互联网的旧时代,一群新奇的广告客户试图通过编码超快帧以向人们疯狂闪烁来制作令人讨厌的广告图像。 浏览器供应商认为这并不酷(并会降低浏览器的性能),因此在某些时候,某人决定不显示延迟小于11毫秒的帧,并通过将这些延迟设置为100毫秒来纠正这些帧,并且现在,这就是所有GIF渲染器所做的。 因此,使用delay=2编码的帧将比使用delay=1delay=0编码的帧渲染速度快5倍。 (请参阅:[ 带有Star Trek测试用例的旧Chromium错误 ],[ Webkit补丁 ]和[ 一些Chromium代码 ])。 那么,这里是一个延迟编码为1 (10毫秒)的GIF:

vs. the same GIF with delays of 2 (20 milliseconds):

与同一个GIF相比,延迟为2 (20毫秒):

Very fast animation of raccoon sweeping.

GIF具有纯文本扩展名, (GIF has a plain text extension,)

where you can encode plain text that is meant to be rendered on top of the GIF. In other words, rather than rasterizing text on top of a GIF, you can just hardcode the text itself into the binary code, along with its intended position data and colors. If this doesn’t sound bananas to you, I must tell you: this is an absolutely bananas way to design an image format spec. (Browsers don’t actually render this block; you can check it out when you get to BOB_89A, below.)

您可以在其中编码要在GIF顶部呈现的纯文本。 换句话说,您可以仅将文本本身连同预期的位置数据和颜色一起硬编码为二进制代码 ,而不是光栅化GIF顶部的文本 。 如果这对您来说听起来不像香蕉,那我必须告诉您:这是设计图像格式规格的绝对香蕉方式。 (浏览器实际上并未渲染此块;您可以在进入下面的BOB_89A时检出该块。)

GIF也有评论扩展名, (GIF has a comment extension as well,)

where you can encode plain text comments not meant to be rendered on top of the GIF. Which means you can bloat the size of your GIF by encoding a secret message that people can only see if they know to decode and inspect your GIF.

您可以在其中编码纯文本注释,而不是要在GIF顶部呈现的注释。 这意味着您可以通过编码一条秘密消息来膨胀GIF的大小,而秘密消息只有在人们知道要解码和检查您的GIF时才能看到。

您可以使用一个用户输入标志来表明这一点, (There’s a user input flag that you can use to indicate that,)

instead of autoplaying the next frame after n hundredths of a second delay, we should wait until the user clicks or presses any key to advance frames. So yes, if everyone still respected the GIF spec, you could absolutely use GIFs as full-fledged slideshows.

而不是在百分之一秒的延迟后自动播放下一帧,我们应该等到用户单击或按任意键以前进帧。 因此,是的,如果每个人仍然尊重GIF规范,那么您绝对可以将GIF用作完整的幻灯片。

Bob Berry, one of the creators of the file format, created a GIF to demonstrate all the new features in GIF89a (most of the good stuff — animation and transparency — came in ’89), and to teach people how to pronounce “GIF.” This is that GIF:

文件格式的创建者之一鲍勃·贝瑞(Bob Berry)创建了一个GIF,以演示GIF89a中的所有新功能(大多数好东西-动画和透明度-始于89年),并教人们如何发音“ GIF。 ” 这就是GIF:

Non-animating image of a man standing in front of rocks in Sedona.

As you can see, it doesn’t look like an exciting GIF, because browsers don’t render the plain text extension; you need a special GIF inspector/custom renderer to view it. Behold, in all of its glory, BOB_89A (if you expand “Comments” in the bottom right, you can read the comments Bob encoded into this GIF about his Arizona vacation).

如您所见,它看起来并不像一个激动人心的GIF,因为浏览器不会呈现纯文本扩展名。 您需要特殊的GIF检查器/自定义渲染器才能查看它。 看哪,在其所有荣耀中, 都是BOB_89A (如果您扩展右下角的 “评论”,则可以阅读Bob编码在此GIF中有关他的亚利桑那州度假的评论)。

There are a bunch more old-school GIFs that use all the weird features, but apparently a lot of old-school internet dudes were gross and pervy, so a few of these involve naked cartoon women, and I’m not going to link them here.

还有更多使用所有怪异功能的老式GIF,但是显然许多老式Internet帅哥都是粗俗的,所以其中一些涉及裸露的卡通女性,我不打算将它们链接起来这里。

Instead, my favorite GIF (my dog Thea reacting to men mansplaining things to me on video calls):

取而代之的是我最喜欢的GIF(我的狗Thea对男人在视频通话中向我施压的React):

Dog rolling her eyes

翻译自: https://medium.com/@lbudorick/weird-things-i-love-about-gifs-e2fed7ccce03

gif动态图gif出处

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git基础教程(必学)

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

用户体验改善案例_优化用户体验案例研究的五种方法

用户体验改善案例重点 (Top highlight)I’ve had the opportunity to give several portfolio reviews, and I want to share some common themes I see and how you can improve them to put your best foot forward as you search for that new product design gig.我有机会发…

我捡到宝了!2022版前端面试上岸手册,最新最细致!

大裁员背景下&#xff0c;没什么比辞职后找不到工作更扎心&#xff01;在行情好转前&#xff0c;前端程序员只能“猥琐发育”&#xff0c;不轻易跳槽&#xff0c;同时要修炼内功&#xff1a;对八股文、底层源码、重点项目等进行查缺补漏&#xff0c;静待行情好转抓住机会&#…

flo file_Flo菜单简介:可扩展的拇指友好型移动导航

flo fileWhen it comes to using my phone, I’m a thumb guy and I like using my phone held in one hand. Well, apparently 49% of us prefer it like this.说到使用手机&#xff0c;我是个拇指小伙&#xff0c;我喜欢用一只手握住手机。 好吧&#xff0c;显然我们当中有49…

超炫的iphone应用UI/UX设计赏析

日期&#xff1a;2012-10-5 来源&#xff1a;GBin1.com 要想成为一款成功的iOS应用&#xff0c;不单单是功能设计&#xff0c;还需要有超棒的用户界面和用户体验的完美设计。为了带给大家更多的设计灵感&#xff0c;今天我们分享另外一套来自dribbble的iOS应用UI和UX设计&…

Git实战进阶教程

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

什么是设计模式_什么是设计?

什么是设计模式Imagine, you are out waiting for a taxi. You are about to miss your appointment. You wait for minutes but Good Lord! — there’s not a single taxi that can offer you a ride.想象一下&#xff0c;您正在外面等出租车。 您将错过约会。 您等待几分钟&…

有哪些值得学习的大型 React 开源项目?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

成年人的样子是什么样子_不只是看样子

成年人的样子是什么样子As a branding, packaging, and digital product designer, both at Input Logic and as a freelancer, I work with clients across a wide array of industries, and am responsible for simultaneously getting to the heart of what each client wan…

如何在工作中打造影响力,带动同事?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

谷歌maps菜单语言设置_Google Maps:拯救未来之路— UX案例研究

谷歌maps菜单语言设置I have a lousy sense of direction, so Google Maps has always been my right-hand app. On a whim last year, I decided to skip the beach and sunburn and head to Budapest for spring break. That’s when Google Maps became my best friend.我的…

1万小时后,我从外包走进了字节跳动,现在出了一本书,文末送书!

谨以此书献给相信“努力有用”的你by 大史不说话《 前端跨界开发指南&#xff1a;JavaScript工具库原理解析与实战》先做个自我介绍我是大史不说话&#xff0c;是一名前端工程师&#xff0c;一个相信“努力有用”的、不太聪明的、行动力还可以的程序员。曾经因为一篇《10000小时…

视觉设计师跟平面设计_使设计具有视觉吸引力

视觉设计师跟平面设计Interaction Design is very gratifying.交互设计非常令人满意。 From fast critical thinking to extracting ideas in tangible forms within the team is sure fun and challenging.从快速的批判性思维到在团队内部以有形的形式提炼想法&#xff0c;无…

ExtJs4 笔记 Ext.tab.Panel 选项卡

本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件&#xff0c;其中每个Tab各有不同&#xff0c;Tab的正文内容可以有三种方式获取&#xff1a; 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信…

一直刷不动算法题,怀疑人生?试试五毒掌法!

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼

1. 前言大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含包含jQuery、underscore、lo…

超级玛丽马里奥版下载_将超级马里奥赋予生命

超级玛丽马里奥版下载Have you ever seen a zoetrope? If today’s sophisticated computer animation is the latest evolution of the form, then the remarkable zoetrope is a crucial ancestor; the transitional form between the drawing and the animation.等皆你见过…

如何在繁重的工作中持续成长?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

熊kong作品资源链接_Kong雀技术:向世界展示您的设计作品

熊kong作品资源链接The door opened and I entered the bedroom of an apartment I was looking to rent. No furniture or items inside, it was almost empty except for a frame in the wall. It was a photo of a peacock. As I stared at it, I could not shake one clear…

漫谈前端工程化基建和架构设计 | 留言送书

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。本文留言抽奖送书&#xff0c;具体规则看文末。透过工程基建&#xff0c;架构有迹可循。前…