《Web動畫週報》第七期：水趣

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

本期亮點：Lorenzo 把本身的電腦窗口變成了一個水缸，水缸中的水能根據窗口的移動而震盪，視覺效果滿分。

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

CSS 動畫

1. 《睡覺的蝙蝠》做者：Thiyagaraj

這是一個純 CSS 動畫，沒有使用一張圖片。動畫的亮點除了畫風治癒之外，還向你們展現瞭如何使用 CSS 繪製常見的幾何圖案，好比橢圓形、三角形、愛心形狀等等。下面這個動畫就向你們演示瞭如何用 CSS 畫三角形。

2. 《日出》 做者：David J. Aldred

這種波浪的感受是怎麼作的？看下面這個動圖你就明白了：

另外，背景顏色的漸變是經過 CSS 濾鏡完成的，濾鏡名字叫作 filter: hue-rotate() 能夠用來改變圖片或者背景的顏色，這個屬性是能夠 animate 的。

3. 《逐漸生成的數字》 做者：Adam Kuhn

這個動畫使用了 grid 佈局，每一個數字都是由一個個的小方塊拼湊起來的。做者爲每種數字寫一個單獨的類來控制，因爲數字一共只有 0-9 十種形狀，因此也不會太繁瑣。方格的出現和消失都是經過改變 clip-path 來實現的，也就是說，這裏的每個小方塊都有本身的 clip-path。

4. 《舞動》 做者：Sebastian Lenton

乍一看還覺得是一個用 Three.js 寫的 WebGL 動畫（由於從材質上看起來就很像😂），但看了代碼發現居然是一個純 CSS 動畫。那些看上去很是 3D 小球實際上是用 CSS 漸變畫出來的，不過是做者將漸變用的爐火純青才達到了這樣以假亂真的效果。地面的倒影更是加強了這種 3D 的感受。

SVG 動畫

1. 《顏色浸染特效》 做者：Mariusz Dabrowski

「Hover Me」 有兩層，第一層是黑底白邊的空心字樣式，第二層是 SVG， 是紅底白字。在動畫的一開始，用 mask 將 SVG 那一層遮蓋出，這樣咱們只能看到黑底白邊的那一層。 當鼠標懸浮在字上時，使用 JS 獲取到鼠標的位置，而後再動態的修改 mask 的位置，再給 mask 設置一個慢慢變大的動畫，第二層就這樣被慢慢顯示出來了。

WebGL / Canvas 動畫

1. 《風》 做者：Johan Tirholm

算是一個比較經典的 canvas 動畫了，飄帶是用 sin() 函數畫出來的，其本質就是三角函數的可視化...這個動畫代碼量不多，JS 部分的代碼不到 40 行，很是適合剛學 canvas 的同窗仿寫。

2. 《用圓圈寫字》 做者：Artem

動畫分爲兩層(兩個canvas)，在第一層 canvas 上直接用 fillText() 把想要寫的字寫出來，這時候這個 canvas 上是白底黑字，可是這層 canvas 並不顯示出來。咱們再寫一個循環逐個像素點的 「掃描」 這個 canavs, 若是這個像素點是黑色，那麼咱們就在另外一個 canvas 的相同位置畫一個圓，因此被寫了字的地方纔會被畫上圓。「掃描」的這個過程其實是經過 getImageData() 獲取 canvas 某一片區域內的像素點的信息。

3. 《水趣》 做者：Lorenzo Cadamuro

代碼被壓縮過了，看不出來用到了哪些技術。物理引擎確定是用了，不過不知道使用的現成的仍是做者本身寫的。動畫比較有創意的一點是經過移動窗口來擺動水，這樣窗口看起來就像一個水缸同樣，視覺上仍是很是震撼的。小編查了下， Web 上好像沒有能夠直接獲取窗口移動速度的 API，可是咱們能夠獲取到窗口的位置。高中物理告訴咱們，知道了時間和位移咱們就能計算出物體的速度和加速度，小編猜想做者多是這樣實現的。

這一期的 Web 動畫週報就到這裏啦。若是你對週報有什麼意見或者建議，歡迎在下方留言。你也能夠向週報投稿，投稿的方式是把本身的動畫的 Codepen 連接發送到週報下面的評論裏便可。Web 動畫週報，一週一刊，每週一發布，咱們下週見！

往期週報

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

《Web動畫週報》第五期：當心駕駛

《Web動畫週報》第四期：密室逃脫

更多往期週報...