🔧 阿川の電商水電行
最近 iOS 推送了新的系統更新：
其實這個更新早在幾個月前的 WWDC 上就開始宣傳了：
仔細看蘋果 Logo，有種磨砂玻璃的質感對吧？因為他們宣傳的 iOS26 主題就是 液態玻璃：
為什麼直接從 iOS18 跳到 26 呢？這跟我們前端的 ES 命名有點像：
- ES
5 - ES
5.1 - ES
2015(ES6) - ES
2016 - ES
2017 - ES
2018 - ES
2019 - ES
2020 - ES
2021 - ES
2022 - ES
2023 - ES
2024 - ES
2025 - ES
2026
蘋果也打算用年份來命名版本，每年都推陳出新一個版本，但叫 iOS2026 有點太長了，於是省略掉前面的 20 就變成了 iOS26。
這個液態玻璃有人覺得好看也有人覺得難看，畢竟一百個讀者就有哈姆雷特嘛！我們公司的產品經理覺得好看，它就想讓我們也學蘋果搞個這樣的主題。頭都大了，先給大家看看我們以前的介面：
我們面向的是海外用戶，所以介面都是英文，有人可能會問那為什麼不去歐美開公司呢？我們確實有歐美的分部，但負責的是運營，而開發基本上都在中國招人，因為國內的牛馬實在是太好用了😭
既便宜又耐用，而且還能無償加班，在歐美你搞這套試試？扯遠了哈！咱們來看下液態玻璃之後的介面：
當然這幾個圖標還沒換成透明的，他們想先看看效果再決定用不用開發液態玻璃主題。由於背景是白色的，所以他們認為這個液態玻璃有點與介面融為一體了，於是我們給它加了點淡藍色：
那麼具體到底是怎麼實現的呢？實現是不可能自己實現的，因為這個效果可不是常規效果，我們一開始搜了一下液態玻璃的實現，結果您猜怎麼著：
這是液態玻璃嗎？這只是個很普通的毛玻璃吧？評論區也都這麼說：
人家液態玻璃的重點是邊緣部分，以我們日常生活中常見的燒水壺來舉例：
大家也可以拿自己的燒水壺試試，可以看到越靠近邊缘，玻璃後面的圖案變形就越嚴重，而且最邊緣還會有倒影，除了變形以外還會有色散：
所以這個效果實現起來還是挺複雜的，感覺是需要計算機圖形學知識的，幸好最終在網上找到了符合需求的液態玻璃效果：
這個效果是由 Three.js 實現的，傳送門：
通過域名大家也能看出來，這是用 React 實現的，但我們公司用的是 Vue。可能有人會說這就是個特效，無論用 React 還是用 Vue 不都一樣么？你就不能給它用 Vue 的語法翻譯過來么？畢竟 Three.js 又不挑框架，但 React Three 挑框架啊：
這個 Demo 大量的使用了 @react-three：
我總不能再仿照 @react-three 寫個 @vue-three 出來吧？那 vue 生態裡就沒有 @vue-three 嗎？有是有，但都不太靠譜：
那你不會直接用 Three.js 寫？@react-three 不也就是層封裝麼？
還真就不會直接用 Three.js 寫，因為以前壓根就沒用過，想要搞懂 @react-three 那些封裝的話必然要去看源碼，而且最好是有一定的 Three.js 基礎才能看明白。這個 React Bits 的作者還出了一個 Vue 版的，Vue 版直接砍掉了這個 Three.js 版的液態玻璃：
也就是說就連原作者都沒法直接用 Three.js 去實現，當然也可能不是他無法實現 Vue 版的，而是脫離了 @react-three 去實現的話很麻煩之類的原因，總之就是原作者並未實現 Vue 版的。他實現起來都費勁呢，更別提我們這種壓根就不會 Three 的人了。
而且產品希望這個液態玻璃只是個錦上添花的效果，不希望為了這個主題而引入 Three.js 從而導致頁面變大變慢，所以 Three.js 這個方案被放棄。幸好這個 React Bits 還有個 SVG 版的，而且 SVG 版的還有 Vue 版實現：
但其實還是更喜歡 Three.js 那版，我也說不上來 SVG 版的哪不好，但確實看起來好像沒 Three.js 版的好看：
不過好在 SVG 版不需要任何依賴就能夠實現，非常的輕量化，在這裡分享給大家：
希望能夠幫助到有需要的人，畢竟國內想模仿蘋果的公司還挺多的，比方說某個把自己手機叫 17 Pro Max 的糧食公司：
往期精彩文章
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
