《Web動畫週報》第二期：欺詐大師與寶石工匠

時間 2019-11-05

標籤 Web動畫週報二期欺詐大師寶石工匠欄目 HTML 简体版

原文原文鏈接

Web 動畫週報，一週一刊，每週五發布。讓咱們來一塊兒聊聊 Web 動畫，和它們背後的故事。html

本期亮點：Jon Kantner 利用視覺欺騙向咱們展現瞭如何在 CSS 中寫出球形按鈕。Yoichi Kobayashi 用 GLSL 創造出瞭如夢似幻的水晶模型。git

週報將 Web 動畫大體分爲三類：CSS 動畫、SVG 動畫和 WebGL/Canvas 動畫。全部的動畫將按類別展現，方便讀者有針對性的學習。github

CSS 動畫

1.《愛，死亡和機器人》做者：Jhey

還記得以前的網飛熱劇《愛，死亡和機器人》嗎，做者用 CSS 還原了這部劇的退場動畫。僞元素的巧妙使用，讓動畫中愛心圖案的繪製只用了一個 <div> 元素。

一個很是精美的 CSS 3D 動畫。這個動畫的精巧之處在於鞋盒的每個面都只用了一個 <div> 元素，有同窗可能會想，一個 <div> 是如何作到鞋盒的裏側和外側兩種不一樣的背景顏色的呢，答案是：僞元素。將僞元素絕對定位到與自身的 <div> 元素相重合，再賦予僞元素不一樣的背景色便可。另外，鞋盒四周的每一個面上都使用了 linear-gradient 來輔助加強 3D 效果，鞋盒底面使用了 radial-gradient 來加強圖片的 3D 效果。

3. 《複選框動畫》做者：Himalaya Singh

鼠標放在複選框上時，紅色圓圈會變粗，這是經過 box-shadow 實現的。複選框被按下時會被 scale(0.9)，用來模擬被按下時的震動。勾選標誌則是藉助僞元素實現的。雖然只是一個小小的複選框，可是動畫作到如此細膩也絕非易事。

4. 《歪斜的框架》做者：JeremyJamesL

乍一看可能看不出來是怎麼實現的，可是一看代碼就清晰了。用一個絕對定位的僞元素將其與自身的 <div> 元素對齊，再對僞元素進行 skew(2deg, 3deg); 在 hover 時再改成 skew(-2deg, -3deg);。

5. 《玩具開關》做者：Jon Kantner

看到動畫的第一反應：word天？怎麼還有人能用 CSS 寫出球形？小編冷靜的大腦告訴本身，不可能的，這確定是視覺欺騙。原來，做者利用 border-radius 畫了兩個半圓，當按鈕向右邊移動時，左邊的半圓 scaleX(0) 右邊的半圓 scaleX(1)，按鈕向左滑動時則反之。把多餘的效果去掉，再給左右兩個半圓附上不一樣的顏色，核心動畫實際上是這個樣子：

SVG 動畫

1. 《城市建造工地》做者： Sarah Drasner

十分壯觀的 SVG 動畫，但用到的元素其實並不複雜，只有最簡單的 translate 和 rotate 而已。動畫有不少小細節，好比能夠用圓盤控制動畫的播放進程，能夠一鍵改變 SVG 的顏色製造白天和夜晚的效果等。另外，介紹一下動畫的做者: Sarah Drasner，曾就任於微軟，Vue 團隊核心成員，同時也是一位 Web 動畫大師，尤爲擅長 svg 動畫，因爲她最近想體驗一下在小公司上班是什麼感受，因而跳槽到了 Netlify 。

2. 《拖 & 放》做者：Aaron Iker

一個製做十分精美的拖放上傳 UI 動畫。將圖片拖入時， upload 按鈕會變成一個小球，並且小球能感知圖片的方位。鬆開鼠標時，圖片化做小泡沫被小球吸入，而後接上一個流暢的上傳動畫。上傳動畫實際上是一個 SVG 路徑動畫，小球感知圖片方位的動畫則是經過 JS 修改 SVG Path 完成的。

3. 《京劇臉譜：貓神》動畫：陳鑫 / 設計：王空空

這個動畫其實從一張靜態圖片改編而來的。動畫用到了不少 SVG 濾鏡。貓神眼圈周圍的火焰效果是經過疊加 <feGaussianBlur> 與 <feColorMatrix> 濾鏡完成的。鼻孔的噴氣特效混合了 <feTurbulence> 與 <feDisplacementMap> 濾鏡。眨眼則是藉助 morph SVG 完成的。動畫每秒有超過 280 個 DOM 在移動，可是經過優化依舊能達到 60 FPS。最後安利一下貓神的設計者，王空空同窗，像這樣好看的京劇臉譜圖他畫了一百張。

WebGL / Canvas 動畫

1. 《三維 Github 貢獻圖》做者：dev

這是一個使用了 Three.js 的 WebGL 可視化做品。輸入本身的 github 用戶名，就能將你的貢獻圖以 3D 的形式呈現出來。提交的次數越多，顏色越深，方塊越大。不過比較惋惜的是，綠色方塊是隨機排列的，因此 x, y, z 軸並不具備任何意義。

2. 《AI 助理》做者：Aaron Iker

一個十分可愛的小凝膠塊。使用了 Three.js，並無用到自定義的 shader。凝膠塊使用的材料就是普通的 MeshPhongMaterial，加了兩道 DirectionalLight 和一個 AmbientLight。凝膠的蠕動效果則是藉助 simplex-noise 這個庫完成的。雖然都不復雜，但最終呈現出來的效果卻很是好。

3. 《水晶》做者：Yoichi Kobayashi

這是小編目前看到過的最真實的水晶模型。從扒下來的源文件中找到了一個帶有水晶紋理的黑白圖片，因此小編猜想這個效果應該是混合了一個帶有水晶紋理的貼圖和一個用來調色的 fragment shader 完成的。因爲小編功力尚淺，再加上源碼已經壓縮過了，因此具體是怎麼實現的目前還無從知曉，歡迎各位福爾摩斯去破案。

圈內大事

谷歌開源新圖片格式web

就在上週，谷歌開源了一種新的圖片格式：.basis。由於這種圖片格式直接在 GPU 中解碼，因此解碼速度很是快，圖片自己的大小也比普通的圖片格式小不少。一張 15M 的 .png 圖片轉換爲 .basis 圖片後僅有 0.6M。這種新的圖片格式很是適用於 web 3D 技術，使用新的 .basis 圖片格式的 web app 和遊戲可以擁有 6-8 倍於以往的貼圖。目前，最新版本的 Three.js r106 已經支持了.basis 圖片格式。閱讀更多app