Google的彈指特效小研究
閱讀時間約 2 分鐘
隨著「復仇者聯盟：終局之戰」的上映，Google 在和薩諾斯與無限手套相關的搜尋結果頁面加了一個灰飛煙滅的特效：
特效被發現後引起了各界熱烈的討論，所以這週末的長知識就來蹭個熱度，看一下灰飛煙滅的特效是如何完成的。
將元素轉換為圖片
其實這個特效很直覺就認為有用 html2canvas，因為需要作出後續的類粒子特效，明顯需要是用圖片下去操作。
稍微用 Chrome devtools 追查一下之後就可以看到 html2canvas 的蹤跡：
粒子效果
如果在特效運作的時候觀察一下 DOM 的狀態，會發現似乎有大量的 canvas 被塞進來。深入追查特效本體的區塊，不像一般的粒子特效會有比較多粒子相關的運算，Google 這個特效的程式碼相對簡潔。
這個粒子效果其實是用一個比較平民的方法達成： 用 canvas 層層疊 + CSS transition 。
在動畫進行中的 Layer view 截圖是長這樣：
層層疊的學問
已經知道了原理是層層疊起來，是不是後面就簡單了？
仔細看一下上面的動畫截圖，可以發現其實它是稍微有 左 -> 右 這樣散開的傾向，而這點其實是需要靠一些巧思來達到的：
- 多層 canvas 分開負責由左至右的像素
- 用不同的 transition-delay 來讓動畫由左至右完成
- 為了粒子效果的隨機性，對原圖取樣的時候也要加入隨機成分
取樣的方法
取樣的方法一樣是從程式碼裡面挖出來：
- 圖層疊起來一定可以拼出原本的圖
- n 可以控制視覺上的紮實度，Google 取 2 看起來剛好
用此方法做一維取 8 層，大概會是像這樣：
幾層比較好？
看 code 可以發現 canvas 的數量就是 32 層，照上面的幾點推論下來，理論上層數越多看起來會越自然，當然也相對的越吃效能。
32 層大概是他們權衡效果與效能之後取得的一個最佳數字。
效果重現
把 Google 的版本整理一下，並且讓層數變成可以設定的參數，歡迎大家玩看看不同層數的效果。
如果想要知道對原圖取樣的方法，這個版本的程式碼應該也比打亂過的原版好讀很多。
注意
- 使用手機觀看的話，層數過高瀏覽器會直接 crash
- 選用的 html2canvas 版本在 Firefox 上的繪製效果會有較大誤差，建議用其他瀏覽器觀看
後記
好久沒寫 blog，這次回來寫有一種力不從心的懶散感 Orz
再接再厲。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
在Google試算表裡面整理數據的時候，我們很多時候會需要運用到加總運算，但是對於少用Excel或者是Excel新手來說，卻不知道應該在哪裡找到加總按鈕並使用SUM 函數來加總範圍中的數字。
比如說現在我們要把一整列的數據加在Total的欄位，但是它又沒有一個功能是右鍵，然後把上面整列加總一起。
Google 從推出搜尋引擎服務之後，乍看之下介面上變化不大，但它背後的演算法核心卻不斷的迭代升級，而有非常大的差異，特別是在 Rankbrain 推出之後。那麼 Rankbrain 到底是什麼？
自己在2004年8月份開始加入了當時還在 beta 版的 Gmail 服務，直到2007年2月7日 Google 才算是正式全面開放用戶註冊，並在2009年7月7日才正式取消了「beta」標誌，象徵正式成為其旗下的服務。
當時的"G"mail，最為人所驚奇的就是提供了 1GB 的 email 空間
Keep常被拿來和OneNote或EverNote來比較，因為都有「快速記事」這部分的功能。當然，EverNote和OneNote除了記事的支援程度和Keep相同以外，在記事的美觀及客制程度上都比Keep來得更為強大，這是做為一個「記事工具」理所當然要有的優勢…
從智慧手機開始普及後，也正是宣告每個人都得「日理萬機」的時代來臨。除了工作上更多需要處理的訊息以外，連家裡也會有更多的訊息出來，都是在要求我們「把事情做好」，因此才有了今天的主題「Getting Things Done」，簡稱「GTD」的數位工作術。
KPI是企業常常用來考核員工表現的關鍵績效指標，但，你還在用「KPI」管理員工嗎？現在哈利熊就來告訴你一個在500強企業風行的管理方法——目標與關鍵結果管理法，簡稱「OKR」。快來看看OKR究竟是什麼？它能如何改善KPI常常無法做最重要的事的問題呢？
Google 園區城裡城外都各有一群長期以車為家的車床族。城裡的人是為了存錢追求更高的夢想，城外的人只是為了追求過一天算一天的生存。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
在Google試算表裡面整理數據的時候，我們很多時候會需要運用到加總運算，但是對於少用Excel或者是Excel新手來說，卻不知道應該在哪裡找到加總按鈕並使用SUM 函數來加總範圍中的數字。
比如說現在我們要把一整列的數據加在Total的欄位，但是它又沒有一個功能是右鍵，然後把上面整列加總一起。
Google 從推出搜尋引擎服務之後，乍看之下介面上變化不大，但它背後的演算法核心卻不斷的迭代升級，而有非常大的差異，特別是在 Rankbrain 推出之後。那麼 Rankbrain 到底是什麼？
自己在2004年8月份開始加入了當時還在 beta 版的 Gmail 服務，直到2007年2月7日 Google 才算是正式全面開放用戶註冊，並在2009年7月7日才正式取消了「beta」標誌，象徵正式成為其旗下的服務。
當時的"G"mail，最為人所驚奇的就是提供了 1GB 的 email 空間
Keep常被拿來和OneNote或EverNote來比較，因為都有「快速記事」這部分的功能。當然，EverNote和OneNote除了記事的支援程度和Keep相同以外，在記事的美觀及客制程度上都比Keep來得更為強大，這是做為一個「記事工具」理所當然要有的優勢…
從智慧手機開始普及後，也正是宣告每個人都得「日理萬機」的時代來臨。除了工作上更多需要處理的訊息以外，連家裡也會有更多的訊息出來，都是在要求我們「把事情做好」，因此才有了今天的主題「Getting Things Done」，簡稱「GTD」的數位工作術。
KPI是企業常常用來考核員工表現的關鍵績效指標，但，你還在用「KPI」管理員工嗎？現在哈利熊就來告訴你一個在500強企業風行的管理方法——目標與關鍵結果管理法，簡稱「OKR」。快來看看OKR究竟是什麼？它能如何改善KPI常常無法做最重要的事的問題呢？
Google 園區城裡城外都各有一群長期以車為家的車床族。城裡的人是為了存錢追求更高的夢想，城外的人只是為了追求過一天算一天的生存。