【免费下载链接】hi-kidHiKid - Your AI English Pal. A desktop app built with React and TypeScript, targeting children in non-English-speaking countries who want to practice English speaking and listening.项目地址https://gitcode.com/gh_mirrors/hi/hi-kid点击查看免费下载HiKid 是一款面向儿童的 AI 英语陪练桌面应用用 React 和 TypeScript 构建。它的核心角色是一只名叫 Kitten 的猫咪——通过纯 SVG 动画状态驱动方案AI 的听、想、说过程都变成了会动的小表情。本文带你完整拆解这套童趣 AI 形象是如何打造的。为什么用 SVG 动画做 AI 角色很多项目会用 Lottie 或 GIF 做角色动画但 HiKid 选择了更轻量的方案一个内联 SVG 组件 一套 CSS 动画。好处非常直接零外部依赖——不需要动画库、不需要位图资源矢量无损——200×200 的 SVG 在任意分辨率下都清晰⚡状态即表情——AI 处于什么状态小猫就摆出什么表情体验自然连贯。整套系统的核心就三个文件文件职责Kitten.tsx渲染 SVG 小猫造型Kitten.module.css定义全部动画与状态样式conversation.ts定义五种状态类型五状态模型AI 的每种情绪都有专属表情状态类型定义在 conversation.tsexport type KittenState idle | listening | thinking | speaking | interrupted每个状态对应一种猫咪表情状态场景猫咪的表情idle空闲微笑、均匀呼吸、偶尔眨眼listening正在听你说话左耳竖起来竖耳朵嘴巴收小thinkingAI 思考中耳朵放平瞳孔看向左上方speakingAI 正在朗读嘴巴o—o—交替开合腮红随节奏脉动interrupted对话被打断眼睛放大、双耳外撇一脸惊讶状态如何流转主进程驱动 IPC 推送小猫的表情不是渲染层自己演出来的而是由主进程的对话流水线真实驱动用户按住麦克风主进程在 channels.ts 的recorder:start中推送listeningLLM 开始生成回答时agent.ts 推送thinking语音合成逐句播放agent.ts 的enqueueTts用队列串行播放每一句第一句开始播放时推送speaking全部句子播完且对话结束回到idle用户中途打断时channels.ts 推送interrupted0.3 秒后再回到idle。渲染层通过 preload/index.ts 暴露的onKittenState订阅这条kitten:stateIPC 事件useConversation.ts 把它存进 React state再作为 prop 传给 Kitten 组件——状态机在后台跑表情在界面上演两侧完全解耦。动画细节CSS 关键帧让小猫活起来打开 Kitten.module.css 会发现所有动画都是纯 CSS 关键帧常驻动画呼吸与眨眼呼吸breathe身体和头部以 3 秒为周期微微起伏scale(1.02) translateY(-2px)像一只小猫在安静地坐着眨眼blink眼睛每 4.5 秒闭合一次——关键帧里 96% 之前都是睁眼只有 98% 那一帧scaleY(0.1)瞬间闭合所以眨起来干脆又自然其他部位耳朵、嘴、胡须、腮红、尾巴统一挂了transition: all 0.2s ease保证状态切换时是平滑过渡而不是生硬跳变。状态专属动画listening左耳运行ear-perk关键帧在 -5° 到 -12° 之间来回转动就像小猫凑近你的声音speaking嘴巴由 React 直接切换结构——Kitten.tsx 中speaking时渲染o形嘴和短横线平时渲染微笑弧线CSS 的speak-o/speak-dash让两者按 0.5 秒周期交替显隐形成o—o—的说话节奏同时腮红blush-pulse同步脉动。一个巧妙的小技巧耳朵的transform-origin: bottom centerKitten.module.css让旋转以耳根为轴转起来才像真的耳朵在动。SVG 结构语义化分组是动画的地基回看 Kitten.tsx 的 SVG 内部每个部位都被g标签按语义分组并挂上 CSS module 类名kitten-tail尾巴一条圆弧pathkitten-body身体两层椭圆叠出肚子kitten-ears双耳外三角 粉色内耳kitten-head头、kitten-blush腮红kitten-eyes眼睛白底 瞳孔 高光点kitten-nose、kitten-mouth鼻子与嘴巴kitten-whiskers六根胡须、kitten-paws两只爪子正是因为分组清晰CSS 才能用.state-speaking .mouth-o这样的选择器精确控制任意部位——这是状态驱动表情能成立的结构基础。跨屏幕复用一只小猫串起整个应用Kitten 组件只接收一个stateprop因此在整个应用里随处复用首次启动引导页 OnboardingScreen.tsxstateidle的安静小猫依赖检查页 DepsSetupScreen.tsxstatethinking表示正在检查模型下载页 DownloadScreen.tsx下载中是thinking出错时变成interrupted的惊讶脸主对话界面 App.tsx完整接入五状态。配合 zh.json 中正在听.../正在思考.../正在说话...的文案以及 useConversation.ts 里用 Web Audio 合成的一句发送音效听觉、视觉、文字三位一体。而且小猫的名字是可配置的——SettingsPanel.tsx 中把aiName留空时会回退到默认的 Kitten。总结状态驱动 纯 SVG 的极简方案HiKid 的 Kitten 角色系统给出的核心思路可以浓缩成三句话把对话流程建模成状态机idle / listening / thinking / speaking / interrupted状态由主进程真实事件驱动SVG 只负责造型CSS 负责一切动画用关键帧 过渡实现呼吸、眨眼和状态表情React 组件保持极简一个stateprop 让小猫可以复用应用的每个屏幕。没有动画库、没有位图资源、没有复杂状态管理——一只 200×200 的 SVG 小猫就足够让 AI 有了表情也让孩子的英语练习多了一份童趣陪伴。赞分享【免费下载链接】hi-kidHiKid - Your AI English Pal. A desktop app built with React and TypeScript, targeting children in non-English-speaking countries who want to practice English speaking and listening.项目地址https://gitcode.com/gh_mirrors/hi/hi-kid点击查看免费下载相关推荐Godot引擎集成Spine骨骼动画完整指南打造专业级角色动画系统Godot引擎集成Spine骨骼动画完整指南打造专业级角色动画系统 还在为Godot中的角色动画制作效率低下而烦恼吗传统帧动画需要逐帧绘制制作周期长、资源终极指南AI Town角色动画系统如何打造生动的虚拟世界终极指南AI Town角色动画系统如何打造生动的虚拟世界 AI Town是一个开源的虚拟城镇项目让AI角色在其中生活、聊天和社交。这个项目的 角色动画系统人工智能AI 应用AI Agent本地部署前端后端游戏开发RAG如何用EaselJS状态机打造流畅的角色动画终极指南如何用EaselJS状态机打造流畅的角色动画终极指南 想要为你的游戏角色创建自然流畅的动画转换吗EaselJS动画状态机正是你需要的解决方案作为Creat前端UI库/组件图形学创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考