苹果 visionOS for web

苹果的 Vision Pro 已经发布了,虽然没有拿到手,但我还是对它的操作界面充满了好奇。

我看到很多小伙伴写了 Windows for Web,Mac OS for Web,所以我也想来实现一下 Vision Pro 的系统主页。

一开始,我以为这不会太难,当头一棒的就是苹果祖传优势: 动画。

这动画,这模糊,还是从中心点开始逐渐向外层扩散,应该根据人眼的视觉特征进行设计的。

问题是,该如何实现呢?

模糊我知道怎么实现,

css 复制代码
filter: blur(15px);

从中心点开始逐渐向外层扩散的效果,我直接来个 transition-delay: 0.1s;

一通操作之下,也实现就似是而非的效果。而且边缘处app图标的缓缓落下的效果也不好。

然后就是光影效果的实现,因为它的很美,让人很难忽略。

在 Vision Pro 系统演示中可以看出,为了模拟菜单栏使用了磨砂玻璃材质,而为了营造真实感,会模拟光照射到玻璃上而形成的光线边框。

我不知道这是不是菲涅尔效应,但问题是,这又该如何在前端实现呢?

我想到了 CSS Houdini,可以利用 Houdini 开放的底层能力 paint 函数来实现一个菜单栏效果。

ini 复制代码
if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('data:text/javascript,' + encodeURIComponent(`
    
        class FresnelAppRectPainter {
            static get inputProperties() { return ['--light-angle']; }

            paint(ctx, size, properties) {
                const borderRadius = 30;
                const fresnelColor = 'rgba(255, 255, 255, .9)';
                const lightAngle = parseFloat(properties.get('--light-angle')[0]) || 0;

                // 绘制圆角矩形
                ctx.beginPath();
                ctx.moveTo(borderRadius, 0);
                ctx.lineTo(size.width - borderRadius, 0);
                ctx.arcTo(size.width, 0, size.width, borderRadius, borderRadius);
                ctx.lineTo(size.width, size.height - borderRadius);
                ctx.arcTo(size.width, size.height, size.width - borderRadius, size.height, borderRadius);
                ctx.lineTo(borderRadius, size.height);
                ctx.arcTo(0, size.height, 0, size.height - borderRadius, borderRadius);
                ctx.lineTo(0, borderRadius);
                ctx.arcTo(0, 0, borderRadius, 0, borderRadius);
                ctx.closePath();
                ctx.fillStyle = 'rgba(163, 163, 163)';
                ctx.fill();

                // 模拟光照效果
                const gradient = create360Gradient(ctx, size, lightAngle)
                ctx.fillStyle = gradient;
                ctx.fill();

                // 添加菲涅尔效果
                const borderGradient = ctx.createLinearGradient(0, 0, size.width, size.height);
                borderGradient.addColorStop(0, fresnelColor);
                borderGradient.addColorStop(0.2, 'rgba(255,255,255, 0.7)');
                borderGradient.addColorStop(1, fresnelColor);

                ctx.strokeStyle = borderGradient;
                ctx.lineWidth = 1.5;
                ctx.stroke();
            }
        }

        registerPaint('fresnelAppRect', FresnelAppRectPainter);
    `));
}

结果效果还可以,我甚至可以接收一个光的入射角度,来实时绘制光影效果。

arduino 复制代码
 function create360Gradient(ctx, size, angle) {
      // 将角度转换为弧度
      const radians = angle * Math.PI / 180;

      // 计算渐变的起点和终点
      const x1 = size.width / 2 + size.width / 2 * Math.cos(radians);
      const y1 = size.height / 2 + size.height / 2 * Math.sin(radians);
      const x2 = size.width / 2 - size.width / 2 * Math.cos(radians);
      const y2 = size.height / 2 - size.height / 2 * Math.sin(radians);

      // 创建线性渐变
      const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
      gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

      return gradient;
   }

演示效果图

哦对了,还有一个弹层底边角的缩放效果,我目前还没想到什么好办法来实现,年底还得抓紧搬砖,只能先搁置了,如果小伙伴们有好办法,欢迎告知或者讨论。

最终效果图

这里是 Demo 地址

本来是冲着纯粹娱乐(蹭流量)来写的,但写着写着就发现好像没那么简单,三个晚上过去,也只写了个首页,不得不感慨苹果真的太细了呀。

以上。

相关推荐
奋斗的小羊羊5 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿5 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡5 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友6 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光7 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_7 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~7 小时前
CSS @media 媒体查询
前端·css·媒体
shix .8 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug8 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴9 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript