苹果 visionOS for web

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

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

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

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

问题是，该如何实现呢？

模糊我知道怎么实现，

filter: blur(15px);

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

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

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

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

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

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

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);

    `));

}

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

 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 地址。

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

以上。