我给 Lyra 重做了一个 404 页面

早些年博客还在用 Hexo 时，我就做过一次 404。那版用了 PixiJS，许多小光点会在屏幕上聚成“404”和“Not Found”，鼠标靠近时还会散开。

当时来回调了很久，后来并没有真正用起来。它跟网站主题不太搭，为了一个偶尔才打开的页面再放进一套动画库也有些重，手机上还会掉帧。

我把它留在了旧文章里。这次给 Lyra 重做 404 时，又想起了这个没有完成的设计。

尝试叠加以前的设计

我尝试过把曾经的 404 和新想法叠加：保留原来的 PixiJS 粒子，再加上横向撕裂和颜色偏移。

实际做出来后，两个效果放在一起有些乱。粒子一直在动，故障效果也在切画面，原本想要的短暂故障反而看不出来。

PixiJS 的内容都在 canvas 里，数字、文字和按钮不能单独处理。切开整块画布很像给视频套了滤镜，再放一份 HTML 又会出现两个 404。转到手机尺寸后，坐标和触摸范围也需要重新计算。

尝试几轮后，我放弃了叠加方案，把 PixiJS 去掉了。

改成现在的故障效果

现在的页面只留下一张卡片、404、几句说明和返回首页的按钮。

最早我直接让卡片抖动，但文字和按钮也会跟着移动，实际使用起来不太舒服。后来改成复制画面：真实页面不动，只在上面放几层不能点击的副本，再从副本中切出一小段做偏移。

故障发生时，真正的文字和按钮仍然留在原位。

这些副本会去掉 id 和 Astro 的页面过渡标记，也不会进入键盘焦点。故障效果后来还加到了导航和页脚，不过每次只随机出现一部分，不会整页一起闪。

给星轨增加错误状态

页面刚做完时，打开一个不存在的网址，星轨会正常走到 100%，然后显示“星轨校准完成”。遮罩退场后才出现 404，这两段内容明显对不上。

我没有取消 404 的加载动画，而是给星轨增加了单独的错误状态。进度到后半段后，轨道和文字会逐渐变红，最后显示 ERROR 404 和“目标星轨不存在”。

错误星轨只在第一次完整打开不存在的地址时出现。

星轨退场后，页面故障效果才会开始。如果从站内进入 404，则不会重新播放首次加载动画。

处理手机和平板的问题

电脑端调整完成后，我在手机上打开导航抽屉，发现故障层会闪到菜单上面。

开始只提高了抽屉的层级，但动画仍在后面运行，关闭菜单时偶尔还会撞上一帧。后来改成抽屉打开时暂停 404 动画并隐藏故障层，完全关闭后再恢复。

这次也一起处理了焦点。打开抽屉后，焦点进入关闭按钮；按 Escape、点遮罩或滑动关闭后，再回到原来的菜单按钮。之后又补测了平板竖屏和横屏。

动画结束后的 404 页面，返回首页的按钮始终可以正常使用。

最后做出来的版本比最初的设想简单。以前的 PixiJS 没有留下来，但这次的 404 已经能接上 Lyra 原有的星轨和配色。

我还是喜欢当年的粒子效果，以后也许会把它单独做成一个小页面，不过不会再放进 404 里了。