仿 Liquid Glass 的效果已经有人在 Web 上复刻出一部分了(非完全还原)

50 天前
 gophlet

只能在基于 Chromimum 内核的浏览器上才能看得到效果。

我挑了几个还原得比较像的,把链接放上来了,大家可以看看。

1 - 这个是我个人感觉最像的了

源码: https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy

2 - 这个还原度差很多

源码: https://codesandbox.io/p/sandbox/nn5q2y

3 - 这个细节多一些,但是凸透镜效果也是不如第一个

预览: https://liquid-glass.maxrovensky.com/

仓库: https://github.com/rdev/liquid-glass-react

4929 次点击
所在节点    程序员
33 条回复
kamilic
50 天前
https://codepen.io/rebane2001/details/OPVQXMv
我看到的是这个,还有各种参数可调,还在研究那个渐变图怎么驱动 DisplacementMap ,感觉这些效果对搞图形的可能并不是那么难,挺容易就做出来了。
rocmax
50 天前
我觉得主要问题在于设备性能和功耗,实时计算模糊和水滴折射效果比较耗算力。
不过 apple 既然这么走了以后肯定也会有同样设计的 web ui 库
rocmax
50 天前
tailwindcss 有现成的 blur ,shadcn 已经在使用了,不知道像水滴边缘折射那样的效果怎么实现,可能需要 shader 。还有水滴间的粘连和弹跳动画也比较麻烦。
zhengjian
50 天前
wangtian2020
50 天前
都怪 css 表现力太强了
icyalala
50 天前
这些 demo 都没有做那个边缘效果,就是那个玻璃区域以外的颜色会被边缘反射的效果:
https://www.xiaohongshu.com/explore/6847ae070000000021007dae?xsec_token=CBgP0mm1cECGUB5LUtSh9v1n96SxcNO6KwiOgnfGdyLAA=
ChrisFreeMan
50 天前
那个反射是怎么回事啊,听说会随着环境而反射光泽?如果是真的,那所有非原生的 UI 实现都 over 了
gophlet
50 天前
@kamilic 感谢分享,这个看起来很不错👍
gophlet
50 天前
@rocmax 是的,目前来看性能问题比较大,动画复杂度也很高。
gophlet
50 天前
@zhengjian 感谢分享,很强!
gophlet
50 天前
@icyalala 确实,太细了这个。
gophlet
50 天前
@ChrisFreeMan 通过现有技术还原到 100% 几乎是不可能的,除非看看后面有没有新的 API 出来;但是看了这么多方案,感觉还原到 80% 以上应该还是可以的。
wyntalgeer
50 天前
光污染
june4
50 天前
@icyalala 怪不得我在另一个贴看到有人说苹果用了光追底下一堆人喷用不到,原来还有这效果,属实有点过份拟物了,性能过剩不消耗掉怕新机卖不动
ChrisFreeMan
50 天前
@june4 还是腾讯有远见啊,听说早早就在应用里面尝试植入虚幻引擎了🐶
PainAndLove
50 天前
不加点消耗性能的功能,怎么淘汰旧机器,怎么创造换机需求? 😊
rocmax
50 天前
gophlet
50 天前
@rocmax Cool.
yangheng4922
50 天前
yokisama
50 天前
大量用 blur 对一些较老的设备都很吃力了,还要计算边缘反射,一多起来用户要骂娘了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1138100

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX