https://xbbyb.asia/项目、代码，和一只忙着转动地球的猫。现有内容为示例技术手记。zh-cnhttps://xbbyb.asia/#post/making-the-earth-spinhttps://xbbyb.asia/#post/making-the-earth-spinTue, 03 Nov 2026 04:00:00 GMT前端开发把猫咪的动作和地球的转速连起来：蹬到球的时候加一点角速度，然后让它慢慢减速。 这个动画里，猫咪和地球各自负责不同的事情。猫咪的后脚按周期伸出、收回，地球则持续保存自己的旋转角度和角速度。两者通过“有效蹬腿”的时刻联系起来。 每次动作跨过设定的发力点，就给地球增加一点角速度。接下来的每一帧，角速度按时间逐渐衰减。这样地球会在蹬腿后转快一点，随后缓下来，而不是突然切换速度。 动画使用 requestAnimationFrame 提供的时间戳计算时间差，并给单帧时间差设置上限。这样切回页面时，不会因为上一帧相隔太久而突然跳动。 所有绘制共用一个循环。暂停时停止这个循环，地球、猫咪和星空一起保持在当前时刻；恢复时重新记录时间，避免暂停时间算进动画进度。 这篇为基于本站实践的示例技术手记。 https://xbbyb.asia/#post/clean-transparent-edgeshttps://xbbyb.asia/#post/clean-transparent-edgesMon, 02 Nov 2026 04:00:00 GMT问题排查边缘看着透明，放到深色背景上却有一圈颜色。问题可能藏在透明像素的 RGB 里。 给猫咪换上深色星空后，边缘的小问题会变得很明显：浅色毛发旁边，可能出现一点不属于背景的颜色。即使像素的透明度很低，它仍然可能保存着原来的 RGB 数值。 纹理缩放时，浏览器会对邻近像素进行采样。接近透明的像素里残留的颜色，可能在插值过程中混到毛发边缘。只把透明度再压低一点，并不一定能解决问题。 本站的做法是在采样前使用预乘透明度，让颜色与透明度一起参与过滤，再按着色器输出方式处理颜色。这样几乎透明的像素不会以原来的饱和颜色影响边界。 前景爪子的遮挡则使用独立的灰度遮罩。遮罩与完整猫咪共享纹理坐标和网格形变，避免固定的裁剪形状在动作过程中露出多余的肚皮或留下硬边。 这篇为基于本站实践的示例技术手记。 https://xbbyb.asia/#post/a-toggle-that-you-can-seehttps://xbbyb.asia/#post/a-toggle-that-you-can-seeSun, 01 Nov 2026 04:00:00 GMT交互设计一个按钮点了之后，用户应该立刻知道发生了什么。把微弱的闪烁开关，改成明确的显示与隐藏。 最初的星光开关只控制少数星星的闪烁。背景星点和装饰星星始终显示，所以即使内部状态已经改变，从画面上也很难看出区别。 这不是按钮没有响应，而是反馈不够明确。现在关闭星光时，会清空星空画布，并隐藏装饰星星；开启时，再绘制背景星点和缓慢闪烁的亮星。 按钮文字同时显示“星光：开”或“星光：关”，aria-pressed 也与可见状态保持一致。即使动画已经暂停，点击开关仍会立即重绘星空，不需要等待下一帧动画。 检查交互时，除了确认变量变了，还要从用户看到的画面重新判断：变化足够明显吗？状态能被读出来吗？暂停时、键盘操作时，是否仍然有效？ 这篇为基于本站实践的示例技术手记。