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

時間 2019-11-05

標籤 Web動畫週報第五當心駕駛欄目 HTML 简体版

原文原文鏈接

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

本期亮點：Jon Kantner 爲咱們帶來了他最新的 Three.js 小遊戲《高速公路競賽》，控制本身的汽車，一塊兒在高速公路上飛馳吧！注意不要撞車哦。canvas

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

CSS 動畫

1. 《旋轉的圓圈》做者：Miracle Onyenma

這是一個純 CSS 動畫，並且做者沒有使用任何的 CSS 3D 屬性，靠着 2D transform 完成了一個帶有三維錯覺的動畫。影子的巧妙使用很大程度上加強了 3D 的感受。

2. 《相位》做者：Adam Dipinto

一個很適合用來看成加載動畫的 CSS 3D 動畫。圓圈其實就是 border 畫的，在動的屬性是 z 方向的位移，經過給每一個圓圈設置不一樣的 animation-delay 實現相似彈簧的動畫效果。

3. 《切換預覽動畫》做者：Mariusz Dabrowski

一個很是精緻的切換動畫，動畫乾淨整潔，沒有拖泥帶水，還適配了移動端。控制邏輯是用 JS 寫的，使用了一個叫作 GSAP 的動畫庫。GSAP 應該是目前在實際業務中用得最多的動畫庫了，不少寫動畫的大佬都推薦過，有興趣的有同窗能夠去了解一下。這個動畫庫最大的特色是 API 設計很是人性化，好學易懂，但功能又很是強大。GSAP 這個庫有目前有三我的在全職維護，因此不用擔憂會忽然中止更新或者死掉，可是正由於是全職維護的緣由，有些功能是須要收費的，不過免費版本足夠知足通常的平常需求。

4. 《流星》做者：Yusuke Nakaya

這是一個純 CSS 動畫，爲元素的巧妙使用讓每一顆流星都只使用了一個 <div> 元素。做者還使用了 filter: drop-shadow() 這個 CSS 濾鏡讓流星看起來有在發光的感受。 filter: drop-shadow() 的做用跟 box-shadow 很類似：都是爲元素添加陰影。可是 filter: drop-shadow() 做爲 CSS 濾鏡效果的一種，相比於 box-shadow 的好處就是在這個濾鏡下的全部元素都會被添加上陰影，這樣咱們就不須要像 box-shadow 那樣一個一個的去加了。