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.pswp.cn/news/274579.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274579.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274579.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C#字符串學習筆記

前言&#xff1a;記得我們老師說過一句話&#xff0c;對字符串的學習程度就是當別人打你一拳你知道痛的情況&#xff0c;所以字符串的處理我們必須學的差不多&#xff0c;這幾篇博客完全是我的學習過程中記錄的筆記&#xff0c;在這里分享一下讓很多剛開始學習.net編程的人能夠…

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.我有機會發…

video from html5

掌握HTML5中的多媒體--視頻(video) 除非你一直生活在一個偏遠的島嶼上,過去一年左右的時間,你應該已經聽說過HTML5的各式炒作。HTML5將重塑富Web應用的未來。 下面 Figure 1的示例展示了HTML5中video標簽與傳統的object標簽的不同. Figure 1 1. <section> 2. <h…

我撿到寶了!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;您正在外面等出租車。 您將錯過約會。 您等待幾分鐘&…

hive實現not in

當前HIVE 不支持 not in 中包含查詢子句的語法&#xff0c;形如如下的HQ語句是不被支持的: 查詢在key字段在a表中&#xff0c;但不在b表中的數據 select a.key from a where key not in(select key from b) 該語句在hive中不支持 可以通過left outer join進行查詢,&#xff0…

有哪些值得學習的大型 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…

HDU 3664 Permutation Counting(DP)

題目鏈接 弱爆啦&#xff0c;組合弱爆了&#xff0c;反正是沒想出來怎么搞這個題&#xff0c;其實這個公式不難推啊&#xff0c;反正就是沒推出來。今天隊內賽&#xff0c;實在是沒辦法了&#xff0c;暴力寫了個DFS&#xff0c;先把10以內的打出表來&#xff0c;發現類似楊輝三…

如何在工作中打造影響力,帶動同事?

大家好&#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.我的…

this和prototype

this出現在構造函數中&#xff0c;更多的是表示一種特有的屬性&#xff1b; prototype主要用于拓展函數的屬性&#xff0c;方法。 在函數類實例化的時候&#xff0c;this的屬性需要復制相應的副本&#xff0c;prototype不用。 function Blog(title,content) { this.titletitle;…

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余篇源碼文章。歷史面試系列。另外…