让一片海在浏览器里呼吸：动态背景的实现取舍

首页的海岸，是这个博客最早确定下来的视觉元素。山体、天空和海面构成了画面的主体，文字只占其中一部分。最初的问题很具体：桌面上的动态壁纸，怎样放进网页里？

这篇记录的是雾海手记目前采用的做法，以及实现过程中需要照顾的阅读体验。

先确定要动的部分

当前网页没有直接运行 Wallpaper Engine 的场景包，而是使用原图和水面遮罩，在浏览器里重建局部波动。

一张图片里，并不是所有地方都需要动。让整幅画面一起扭曲，会让山体和天空也产生不自然的晃动。因此，动画分成了两份输入：

- 原图负责提供海岸的颜色和细节。

- 遮罩负责限定可以产生扰动的水面区域。

遮罩值决定扰动强度。网页对水面附近的取样位置做很小的偏移，再从原图取出对应颜色。这个过程产生的是水面波动的视觉效果，并不等同于原壁纸的完整动画。

让风景服务于页面

背景需要铺满视口，但文字和按钮必须保持清楚。当前页面让背景承担氛围，把内容放在它前面；进入阅读详情后，背景动画会暂停。

这也是一个容易忽略的取舍：同样的动画，在首页可能有吸引力，在长文阅读时却可能分散注意力。进入文章后，阅读本身应该成为重点。

页面还提供手动暂停入口。喜欢安静画面的访客，可以自行停止动态效果，不必接受固定的观看方式。

控制动画的资源使用

当前渲染器限制了像素比例，并以约 30 帧每秒的节奏更新。这里的目标是控制渲染开销，并不是声称所有设备都能保持同样流畅的表现。

另外几种状态也会影响播放：

1. 浏览器标签页隐藏时，暂停动画。

2. 系统开启减少动态效果偏好时，暂停动画。

3. 页面组件卸载时，取消动画帧、断开尺寸监听并释放图形资源。

这些处理不会直接出现在页面截图里，却决定了动态背景能否长期留在网站中，而不只是短暂展示。

动不起来，也要能读

浏览器可能不支持 WebGL，纹理可能加载失败，图形上下文也可能丢失。遇到这些情况，网页会回退到静态底图。

对于博客来说，背景动画属于增强体验。它失败时，文章、导航和其他内容仍应能够访问。黑屏或者不断等待，不应该成为一个装饰效果的代价。

当前实现的边界

这次实现保留了海岸画面的氛围，也让局部海面能够运动，但仍有明确边界：

- 它是基于图片取样的局部扰动，不是真实的海浪模拟。

- 它没有复现原壁纸的全部场景特效。

- 移动设备上的流畅程度仍需要持续观察，不能只用开发电脑的效果判断。

后续如果继续优化，重点会放在文字对比度、加载速度和设备适配上。背景已经能动，下一步更值得关注的是：它是否让人在这里待得舒服。

---

系列：雾海手记开发记录 · 01

后续主题：天气定位、内容浏览量、媒体资源管理。

页面实录


当前博客首页的实际截图。静态图片用于展示布局，水面动画需要进入首页查看。