同一個動畫,我用三種技術棧實現的區別?
最近我做了個挺有意思的小實驗。 我把一個二次元角色的小動畫效果,分別用: WebGL Canvas 2D 純 DOM + CSS 實現了三遍。 效果本身不複雜: 眨眼 眉毛/下眼皮聯動 流汗輕微飄動 呆毛甩動 但真正有意思的,其實不是「做出來」。 而是: 同一個東西,用三種技術棧實現時,到底會差多少? 本質上就是一次「前端圖形學味很濃」的復刻實驗。 一開始只是想復刻一個呆毛動畫 靈感來源:https://tamanidamani.itch.io/nijikas-ahoge 我當時想法特別簡單:「如果是我,要怎麼實現?」 然後越做越上頭。最後直接演變成: 那我乾脆把 WebGL、Canvas2D、DOM 三種方案都做一遍算了。 於是倉庫就變成了現在這樣: canvas/ canvas2D/ dom/ 三個版本同效果實現。 先說結論 如果只讓我說一句話: WebGL 最強,但 Canvas2D 最舒服,DOM 最適合業務 1. WebGL 版本:最像「真正遊戲開發」 這個版本是最折騰的。 因為它本質上已經不是「前端動畫」了, 而是:GPU 圖形編程 它到底怎麼實現的? 核心思路其實就是: 底圖一層 精靈圖一層層貼 shader 控制繪製 JS 驅動動畫參數 比如: 呆毛旋轉 眨眼裁剪 alpha 混合 這些其實都在 GPU 那邊做。 你會開始接觸: uniform texture shader UV 頂點座標 紋理座標 然後人會逐漸失去笑容。 但 WebGL 真強 當元素一多的時候, WebGL 那種: 「完全不慌」 的感覺特別明顯。 尤其是: ...