《Web動畫週報》第六期：荷塘月色

Chenxin_nth發表於2019-08-05

Web動畫

Web 動畫週報，一週一刊，每週一發布。讓我們來一起聊聊 Web 動畫，和它們背後的故事。

本期亮點：Unicar 為我們帶來了他最新的 WebGL 動畫，一個可以互動的鯉魚荷塘。ChenXin 為我們展示瞭如何將一副靜態的月色圖變為一張有層次感的、可通過重力感應互動的 3D 圖片。

週報將 Web 動畫大致分為三類：CSS 動畫、SVG 動畫和 WebGL/Canvas 動畫。所有的動畫將按類別展示，方便讀者有針對性的學習。

CSS 動畫

1. 《CSS 3D 變換》作者：Neil McCallion

如此酷炫的幻影動畫小編還是第一次見? 其實原理很簡單，就是畫很多個 div 元素，然後把這些 div 元素進行用 css transform 進行 z 方向的位移，這樣離我們遠的 div 看起來就會小，離我們進的看起來就會大，最後將這些 div 旋轉起來就可以了。另外很重要的一點是，這個動畫的 div 的背景圖片設定的是一張 gif 動圖，如果是靜態圖片的話就沒有這麼酷炫了。

2.《馬蹄兒蹬蹬蹬》作者：Steve Gardner

媽媽問我為什麼跪著看動畫系列。這是一個純 CSS 動畫，整匹馬由無數個幾何形狀拼接而成，每個幾個形狀都有自己的 css animation, 我們一起來看下這個動畫的解構：

作者將一張靜態圖片改成了一張帶有 3D 特效的圖片，還新增了重力感應。如何將靜態平面圖改成帶有層次感的 3D 圖片？先將靜態圖分解，按距離遠近分類，將距離相同的物體放在同一個圖層上。比如這個動畫就有四個圖層：前面的雲和比較大的星星為第一層，也是視覺上裡我們最近的一層，月亮為第二層，後排的雲和小星星為第三層，深藍色的背景為第四層，第四層是離我們最遠的一層。將每一層設定為一個 div 元素的背景，然後利用 css translateZ 進行位移，把第一層移到離我們最近，第四層離我們最遠，這樣層次感就出來了。然後如何新增重力感應呢？Web 裡有一個叫做 deviceorientation 的事件，監聽這個事件我們就能拿到裝置的實時旋轉角度，然後根據拿到的角度設定 css rotate 就可以了。不過需要注意的是，通常情況下瀏覽器向裝置請求旋轉角度都會被拒絕，所以一般要在瀏覽器裡自己修改一下設定。

SVG 動畫

2. 《幾何心碎》作者：Ryan Zola

愛心由一個個的三角形拼接而成，碎裂的動畫其實就是讓這些三角形進行隨機的位移。看起來很複雜，但因為路徑都是隨機的，所以程式碼並不會很複雜。另外有一個小細節就是，在愛心破碎之後為碎片加上一個高斯模糊的濾鏡，這樣讓人感覺碎片真的像飛到了眼前一樣。

3. 《深海》作者：袁川

這個動畫可不是簡單的 png 圖片的位移哦，如果你仔細看每一條鰩魚，你就會發現它們是有波浪感的。這種破浪感是通過 SVG 濾鏡來實現的，作者混合了 feTurbulence 和 feDisplacementMap 兩種濾鏡。對了，背景也不是一張圖片，而是用 CSS 隨機生成的。

WebGL / Canvas 動畫

1.《焰火》作者：Teejay Parker

這個焰火動畫算是眾多焰火動畫中比較優秀的了，動畫有很多細節，比如焰火不是豎直著飛上天空的，而是打著旋兒飛上去的，這個飛上去的旋轉路徑用到了 SVG 的 Path。另外焰火的種類也很多，雖然 GIF 中沒有呈現出來，但是你如果點進連結，觀察一段時間就會發現有很多種焰火。不過小編覺得焰火的顏色還可以再斟酌一下，目前的顏色搭配並不是很和諧。