《Web動畫週報》第三期：死亡之舞

時間 2019-11-05

標籤 Web動畫週報三期欄目 HTML 简体版

原文原文鏈接

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

本期亮點：Paul 爲咱們帶來了他最新的 WebGL 動畫《死亡之舞》，一隻熒光蜘蛛在霓虹色的蛛網上隨着節奏擺弄着本身的身姿。死亡，每每伴隨着最鮮豔的顏色。ide

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

CSS 動畫

1. 《3D 摺疊收據》做者：Kriszta

一個製做很精美的 CSS 3D 摺疊動畫。被摺疊的部分實際上是兩個僞元素，這樣能夠減小 <div> 元素的過分使用。摺疊的視覺效果是經過將兩個僞元素繞 x 軸方向進行旋轉實現的： rotate3d(1, 0, 0, xdeg)。繞 x 軸旋轉究竟是朝哪一個方向旋轉？CSS rotate3d 遵循左手法則：伸出左手，讓大拇指與其他四指垂直，將大拇指朝向 x 軸正方向（即水平向右），其他四指彎曲的方向就是繞 x 軸旋轉的正方向。 y， z 軸同理。

2. 《懶惰的滑動條》做者：Anurag

動畫使用了一個叫作 Verly.js 的庫。Verly.js 是一個基於 JavaScript 的物理引擎(庫)，還比較新，最近纔出生，這個動畫的做者就是 Verly.js 的做者本人。因爲小編尚未詳細的瞭解這個庫，因此也很少作評價。不過引擎的使用方式很是簡單，像上面這個動畫，直接將 <input class="slider"...> 元素傳入一個函數就能夠了，只須要一行代碼。

3. 《Apple Mac Pro》做者：Filip Vitas

這是一副用 CSS 畫的 Apple Mac Pro，還原程度至關之高。不過比較惋惜的是蘋果的 logo 並非用 CSS 畫的，而是一張 png 圖片。

SVG 動畫

1. 《波》做者：Alaric Baraou

乍一看還覺得只是普通的 SVG 路徑動畫，仔細一想，咦，不對呀， SVG 路徑動畫只能畫光滑的線，這種相似於毛筆效果的路徑用路徑動畫是畫不出來的啊。查看源碼發現，確實是用到了 SVG 路徑動畫，不過路徑動畫不是用在咱們所看到的這些毛筆筆畫上的，而是用在 <mask> 上的。簡單來講，「波」字的每個筆畫都被一個和這個筆畫形狀差很少的很粗的光滑曲線「遮住」了，這些光滑的曲線被放在 <mask> 中，當咱們利用路徑動畫緩緩的畫出這些 <mask> 的時候，這些筆畫也就被畫了出來。

2. 《分欄》做者：Andreas Storm

一個典型的 SVG Gooey 特效。所謂 Gooey 特效其實就是咱們常常所說的流體特效的一種，可是 Gooey 特效不只能夠用來模擬流體，還能夠用來模擬火焰(好比咱們上一期中貓神的眼部火焰其實就是用的 Gooey 特效)。Gooey 特效有不少版本，通常咱們用 SVG 濾鏡來實現，一般最少也須要使用到兩個濾鏡： <fegaussianblur> 和 <fecolormatrix>，其他的濾鏡能夠根據要實現的效果再酌情添加。

3. 《波浪 LOGO 動畫》做者：Peter Barr

一個很細膩的並且頗有創意的 SVG logo 動畫。從這個動畫中能看到 Gooey 特效的影子，並且動畫也確實用到了 Gooey 特效所使用的 <fegaussianblur> 和 <fecolormatrix> 濾鏡。不一樣的是，做者還添加了 <feTurbulence> 和 <feDisplacementMap> 這兩個濾鏡，前者用來曲線化 logo 的輪廓，後者爲動畫添加一些位移以營造波浪的感受。

WebGL / Canvas 動畫

1. 《紫色激光》做者：Dave Kwiatkowski

這個動畫就是很典型的「用很簡單的代碼寫出了很好看的特效」的案例。若是你是一個 canvas 的初學者，強烈建議你像我同樣照着源碼仿寫一遍這個動畫，由於源碼很短，JS 部分只有50行，很容易看懂。並且源碼寫得很整潔，能夠看看別人是怎麼整理 canvas 代碼的。

2. 《死亡之舞》做者: Paul

建議你們點進連接欣賞這個動畫，由於這個動畫有背景音樂。一隻熒光蜘蛛隨着音樂的節奏在跳舞，音樂的名稱叫《Totentanz》，翻譯成中文即爲《死亡之舞》。這是一個使用了 Three.js 的 WebGL 動畫。熒光的效果使用了 Three.js 的 UnrealBloomPass 後處理。蜘蛛的舞蹈並無 hook 上任何的音頻 API，由於音樂自己沒有變奏，因此只須要讓蜘蛛在特定的頻率下跳動就能夠了。