Google的彈指特效小研究
隨著「復仇者聯盟：終局之戰」的上映，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 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
本文介紹了在After Effects中使用表達式為圖層添加延遲效果的方法，通過根據層的索引相對於其父層的索引來計算延遲時間，並應用到層的位置屬性上，可以創建連續的延遲效果，使每個層根據其索引值產生不同的延遲，形成鏈條效應。
最近在嘗試使用不同的AI生圖方式混合出圖的方式，採用A平台的優點，並用B平台後製的手法截長補短，創造出自己更想要的小說場景，效果不錯，現在以這張圖為例，來講一下我的製作步驟。
在 After Effects 中，彈跳效果（Bounce Expression）可以讓層看起來像是受到彈簧或重力的影響，常用於創建自然的運動效果。這些表達式可以應用於位置（Position）、比例（Scale）、透明度（Opacity）等屬性。
在社群平臺上，一切的可見度都受到演算法控制，想要增加曝光就必須深入瞭解演算法的運作方式。本篇文章將透過說明演算法的運作方式以及狙擊演算法的第一步：HOOK來提供一些策略，協助創作者應對平臺演算法的變化。
網格擴散可以就像剪紙一樣，把紙上想要的部分剪下來。
通過模型的一個點，找到周圍相鄰的點；其他點又能找到周圍相鄰的點，就像水波一樣擴散出去。
許多3D的算法，如裁切、干涉深度偵測等都會用到。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
本文介紹了在After Effects中使用表達式為圖層添加延遲效果的方法，通過根據層的索引相對於其父層的索引來計算延遲時間，並應用到層的位置屬性上，可以創建連續的延遲效果，使每個層根據其索引值產生不同的延遲，形成鏈條效應。
最近在嘗試使用不同的AI生圖方式混合出圖的方式，採用A平台的優點，並用B平台後製的手法截長補短，創造出自己更想要的小說場景，效果不錯，現在以這張圖為例，來講一下我的製作步驟。
在 After Effects 中，彈跳效果（Bounce Expression）可以讓層看起來像是受到彈簧或重力的影響，常用於創建自然的運動效果。這些表達式可以應用於位置（Position）、比例（Scale）、透明度（Opacity）等屬性。
在社群平臺上，一切的可見度都受到演算法控制，想要增加曝光就必須深入瞭解演算法的運作方式。本篇文章將透過說明演算法的運作方式以及狙擊演算法的第一步：HOOK來提供一些策略，協助創作者應對平臺演算法的變化。
網格擴散可以就像剪紙一樣，把紙上想要的部分剪下來。
通過模型的一個點，找到周圍相鄰的點；其他點又能找到周圍相鄰的點，就像水波一樣擴散出去。
許多3D的算法，如裁切、干涉深度偵測等都會用到。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...