幕后制作2026年7月11日

Kotoro 如何在网页上移动？

从散步、跳跃、悬挂到休息，了解这只像素猫咪如何把网页当作自己的小空间。

Kotoro 团队阅读约 6 分钟

网页原本并不是为猫咪行走而设计的。页面上只有位置和大小不断变化的按钮、图片与文字框。Kotoro 会把这个画面理解成一个小舞台，并在上面自然地行动。

本文内容

把屏幕看作一个小空间

对 Kotoro 来说，浏览器画面是一个带有坐标的空间。系统会根据当前位置、移动方向和速度，计算猫咪下一刻出现在哪里。猫咪在空中时会向下落，碰到屏幕底部后则会停住，不会继续掉下去。

散步和跳跃等行为建立在这些基本规则之上。因此，猫咪看起来不是机械地循环播放图片，而是会根据当前位置与状况做出动作。

猫咪动作实验室

点击按钮，看看不同状态如何改变猫咪的动作。

卷起尾巴，短暂休息

上面的实验室没有重现 Kotoro 的全部物理规则，但展示了最核心的方式：一个状态如何同时连接位置变化与动画。

如果猫咪在散步时突然跳跃，又马上睡着，只是随机切换图片，带来的会是违和感，而不是生命力。因此，Kotoro 会把散步、跳跃、休息、梳毛与聊天分别管理为不同状态。

每个状态会同时决定三件事：

例如，聊天时会保持适合对话的样子；移动时，动画朝向也必须与前进方向一致。正是这些细小的连接，让用户感到 Kotoro 是一个角色，而不只是贴在屏幕上的图片。

新闻文章可能很长，视频网站的播放器也可能占据大部分画面。用户滚动页面或调整窗口大小时，猫咪可以活动的区域会立刻改变。

因此，Kotoro 不会一直相信第一次计算出的画面大小。它会重新确认当前可见区域与所在位置，避免自己完全跑出屏幕。用户亲手调整的位置也会保存，并自然延续到下一个页面。

动作更多并不一定更可爱。如果阅读时猫咪一直遮住正文，或停在重要按钮上，很快就会让人感到不便。

设计动作时，我们会同时考虑这些原则：

Kotoro 想长期待在浏览器里，就应该成为“相处起来很舒服的角色”，而不只是“动作很多的角色”。