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

時間 2019-11-05

標籤 Web動畫週報第四密室逃脫欄目 HTML 简体版

原文原文鏈接

望周知：《Web動畫週報》從下週開始修改成每週一發布，目前每週五發布對於小編來講太過匆忙，修改成週一發佈後就能夠利用週末的時間寫週報，這樣週報的質量也會更高一些。下次的發佈時間爲本月的二十八號。ios

本期亮點：Kristopher 爲你們帶來了一個用 CSS 和 JS 製做的密室逃脫小遊戲。遊戲內容很是硬核，你是否有能力解開全部謎團，逃出昇天呢。git

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

CSS 動畫

1. 《Twitch App 加載動畫》做者：Daniel Hearn

這是做者爲 Twitch 製做的加載動畫。平時打遊戲的同窗可能知道 Twitch 是海外最大的遊戲直播平臺。加載圖案的設計以紫色色調爲主，符合 Twitch 的主題顏色。動畫創意很好：用四個小方塊將中間的紫色方塊推轉一週，如此循環。因爲動畫自己並不複雜，因此做者是使用 CSS animation 實現的，並無用到 JS。canvas

2. 《遞色溶解漸變》做者：David J. Aldred

這個動畫有兩個值得注意的地方。一是圖中的各種形狀，包括水滴，花瓶和鵝卵石，這些形狀都是經過 border-radius 實現的， border-radius最多能夠接受八個參數，有興趣的同窗能夠看一下這個網站。第二，動畫中帶有一點磨砂質感的漸變色是經過 CSS mask 配合 radial-gradient 實現的，在第一期中咱們其實看到過類似的效果，不過那個是經過 background-blend-mode 實現的。

3. 《360度圖片預覽器》做者：jakob-e

厲害的動畫師有一萬種方法可以欺騙你的眼睛。上圖的這個動畫並無使用到任何的 3D 模型，而是用到了不少不少張不一樣角度的椅子的圖片。隨着鼠標的移動，切換到不一樣的圖片，僅此而已。相較於直接使用 3D 模型，這種方式的優勢是兼容比較好，但缺點也很明顯，須要預加載大量的圖片，並且視角有限，並不能實現無死角的模型預覽。

4. 《密室逃脫》做者：Kristopher Van Sant

很久沒有看到這麼複雜的做品了。這是一個用 CSS 和 JS 製做的密室逃脫小遊戲。經過尋找各種線索，打開房門右邊的六道鎖，你就能夠通關遊戲。無奈遊戲太過於硬核，小編玩得是雲裏霧裏，有興趣的同窗能夠本身試一試。

SVG 動畫

1 《快樂的雲》做者：shalanah

一個很治癒的 SVG 小動畫。點擊雲朵它會眨眼睛，還會冒愛心。咱們能夠從這個動畫裏學到一種比較簡單的製做眨眼動畫的方法：先將眼珠的 opacity 變爲 0, 而後將圓形的眼睛輪廓使用 scaleY 讓其朝 Y 方向壓扁一點便可。

2. 《電子設備》做者：Chris Gannon

又是 Chris Gannon 的動畫，一如既往的細膩。這個動畫的意圖是想展現網頁內容在不一樣設備中的適配。不只設備間的切換動畫很流暢，還有一個小細節就是，不一樣設備中展現的內容是相同的，沒有增多也沒有減小，並且內容的變換是有邏輯的。這個動畫的使用場景不少，類似的動畫小編也看過很多，可是能作到如此細膩的卻很少見。

WebGL / Canvas 動畫

1. 《生長 II》做者：Sean Free

一個 canvas 2d 動畫，涉及到了三個比較經常使用的 canvas 動畫知識點，一是鼠標跟隨，二是隨機移動，三是殘影技術。因爲動畫的配色很好，因此最後出來的效果仍是很是驚豔的。

2. 《波浪轉場特效》做者：Alain

想真正的體驗這個轉場特效的魅力你們仍是得親自光臨一下這個特效的原創網站，這個叫作 Taotajima 的網站是由一位叫作 Yuichiroh Arai 的日本人制做的。波浪式的轉場特效配合文字的飄散效果讓人感受整個網站是渾然一體的。就這個波浪轉場特效而言，其實並不複雜，只是用到了一些簡單的 vertex shader，可是正是那些能利用簡單代碼寫出夢幻效果的動畫師才愈發讓人佩服。上圖中展現的算是這個特效的一個 Demo 版本，Demo 能看到源碼，更適合學習。

圈內大事

1. 訪問 Three.js 官網的中國 IP 數量首次超過美國，成爲第一。

Three.js 的創始人 Ricardo 前幾天發佈推特稱，上個月訪問 three.js 官網的中國 IP 第一次超過了美國，中國成爲了上個月訪問 three.js 人數最多的國家，其次是美國、英國、印度、日本。固然，撇開自己的人口基數不談，有人猜想此次中國的登頂可能與 three.js 官網中文文檔的完善有關。post

另外，借這個新聞的契機，小編想推薦一個學習 three.js 很是好的網站：Three.js Fundamentals。Three.js 是一個很活躍的庫，因此更新很快，但網上的教程每每更新滯後，這個網站裏面的教程是利用最新的 three.js 版本編寫的，並且寫的很詳細，這本書的做者自己也是一位大佬，更可貴的是這個網站是徹底免費的。網站有中文，可是推薦有條件的同窗仍是閱讀英文，主要是兩個緣由，一是學的時候不免會要查資料，three.js 這一塊目前中文的資料還很少，仍是得用英文查，二是爲之後深刻學習 three.js 作好準備，由於那些網站和資料也所有都是英文的，長痛不如短痛，越早的解決語言問題越好。學習

2. 推特網站 UI 更新翻船，你們紛紛抱怨新 UI 設計不合理。

就在昨天，推特更新了 Web 版的 UI，可是新 UI 卻引發了不少人的不滿。咱們先來看看新 UI 長什麼樣子吧。。。動畫

新的 UI 大體分爲三列，但問題是最左邊的一列和最右邊的一列平時你們幾乎是不會看的，如今這兩列反而被放大了。中間那一列本應該是重點內容，可是新 UI 留給中間那一列的空間並很少。整個頁面看起來很是擁擠，滑動的時候很容易讓人分心，集中不了注意力，不知道到底該看哪裏。不過新 UI 也有小編喜歡的地方，好比能夠自定義配色。

感受這個事還鬧得挺大的，小編也很好奇推特那邊會不會從新設計 UI，咱們也將持續關注這一事件。網站