首页
文章
相册
工具
关于
Zh
...
文章
/
系列
/
实现一个跟随鼠标移动的小猫
系列 · 02
实现一个跟随鼠标移动的小猫
系列 · 02
进行中
实现一个跟随鼠标移动的小猫
用 React 复刻经典的 oneko.js 小猫 —— 雪碧图、动画状态，以及页面上流畅的鼠标跟随。
javascript
canvas
animation
0 / 6 章
始于 2026年5月
·
5月26日
适合谁
对精灵图动画和有趣 UI 感兴趣的同学。有 React 基础即可，我们会一步步搭建。
你将学到
雪碧图与帧动画的原理
跟踪鼠标并切换动画状态
封装可复用的 React 覆盖层组件
常驻动画的性能注意点
章节
点击章节可预览 →
01
雪碧图结构解析
6 分钟阅读
新
02
在 Canvas 上绘制小猫
8 分钟阅读
03
鼠标跟踪的数学
7 分钟阅读
04
动画状态机
10 分钟阅读
05
React 组件 API
9 分钟阅读
06
打磨与边界情况
6 分钟阅读