🍏让前端去做 iPhone 的液态玻璃❓
最近 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 的粮食公司：
往期精彩文章
来源：juejin.cn/post/7552402306222882842
