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

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

本期亮點:Unicar 爲咱們帶來了他最新的 WebGL 動畫,一個能夠交互的鯉魚荷塘。ChenXin 爲咱們展現瞭如何將一副靜態的月色圖變爲一張有層次感的、可經過重力感應交互的 3D 圖片。瀏覽器

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

CSS 動畫

1. 《CSS 3D 變換》 做者:Neil McCallion

如此酷炫的幻影動畫小編仍是第一次見😂 其實原理很簡單,就是畫不少個 div 元素,而後把這些 div 元素進行用 css transform 進行 z 方向的位移,這樣離咱們遠的 div 看起來就會小,離咱們進的看起來就會大,最後將這些 div 旋轉起來就能夠了。另外很重要的一點是,這個動畫的 div 的背景圖片設置的是一張 gif 動圖,若是是靜態圖片的話就沒有這麼酷炫了。

2.《馬蹄兒蹬蹬蹬》 做者:Steve Gardner

媽媽問我爲何跪着看動畫系列。這是一個純 CSS 動畫,整匹馬由無數個幾何形狀拼接而成,每一個幾個形狀都有本身的 css animation, 咱們一塊兒來看下這個動畫的解構:

3. 《月色》 做者:陳鑫

做者將一張靜態圖片改爲了一張帶有 3D 特效的圖片,還添加了重力感應。如何將靜態平面圖改爲帶有層次感的 3D 圖片?先將靜態圖分解,按距離遠近分類,將距離相同的物體放在同一個圖層上。好比這個動畫就有四個圖層:前面的雲和比較大的星星爲第一層,也是視覺上裏咱們最近的一層,月亮爲第二層,後排的雲和小星星爲第三層,深藍色的背景爲第四層,第四層是離咱們最遠的一層。將每一層設置爲一個 div 元素的背景,而後利用 css translateZ 進行位移,把第一層移到離咱們最近,第四層離咱們最遠,這樣層次感就出來了。而後如何添加劇力感應呢?Web 裏有一個叫作 deviceorientation 的事件,監聽這個事件咱們就能拿到設備的實時旋轉角度,而後根據拿到的角度設置 css rotate 就能夠了。不過須要注意的是,一般狀況下瀏覽器向設備請求旋轉角度都會被拒絕,因此通常要在瀏覽器裏本身修改一下設置。

SVG 動畫

2. 《幾何心碎》 做者:Ryan Zola

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

3. 《深海》 做者:袁川

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

WebGL / Canvas 動畫

1.《焰火》 做者:Teejay Parker

這個焰火動畫算是衆多焰火動畫中比較優秀的了,動畫有不少細節,好比焰火不是豎直着飛上天空的,而是打着旋兒飛上去的,這個飛上去的旋轉路徑用到了 SVG 的 Path。另外焰火的種類也不少,雖然 GIF 中沒有呈現出來,可是你若是點進連接,觀察一段時間就會發現有不少種焰火。不太小編以爲焰火的顏色還能夠再斟酌一下,目前的顏色搭配並非很和諧。

2. 《鯉魚荷塘》 做者:unicar

一個可交互的 WebGL 動畫,點擊鯉魚它就會掉頭躲開你。這個動畫最優秀的地方就在於這個掉頭躲開的動做,並非簡單的旋轉,若是你仔細觀察就會發現,這個掉頭的動做是有身位擺動的,很是逼真寫實,也是這個動畫最難的地方。另外動畫還用了一些小技巧,好比隨機生成魚羣,利用陰影加強 3D 感等等。

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

往期週報

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

《Web動畫週報》第四期:密室逃脫3d

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

更多往期週報...orm

相關文章
相關標籤/搜索