Skip to content

Portrait Gaze Implementation Plan ​

Goal: 实现已确认的双眼统一视线与整颗头轻跟随,先用于当前首页预览;不将尚未确认的整页布局接入正式首页。

Architecture: 保留现有头像文件。独立 Vue 组件用 SVG 眼睑遮罩、柔和眼白与原图虹膜纹理组成可动眼睛;两眼使用同一方向,整颗头包含头发和耳朵一起动。一个按时间步进的临界阻尼动画循环驱动眼睛和头部,静止时停帧。

Tech Stack: Vue、原生 SVG、Pointer Events、requestAnimationFrame、IntersectionObserver;不新增依赖。

Files ​

  • docs/.vitepress/theme/components/HomeCreatorPortrait.vue:头像分层、跟随生命周期与静态回退。
  • docs/.vitepress/theme/data/portrait-gaze.mjs:共享方向、中心死区、椭圆边界及临界阻尼步进。
  • docs/.vitepress/theme/components/HomeCreatorHero.vue:将首屏指针事件转交头像组件。
  • docs/.vitepress/theme/home-creator.css:移除旧的大幅磁吸,保留既有布局。
  • docs/internal/home-motion-2026-10-25/gaze/verify-gaze.mjs:真实浏览器交互、边界和响应式验证。
  • tests/portrait-gaze.test.mjs:方向、边界、帧率独立性和收敛行为。

Sequence ​

  • [x] 先运行浏览器验证,确认现有页面缺少可独立运动的两层虹膜。
  • [x] 实现方向与阻尼函数并验证:中心正视、极端位置有界、不同帧率一致、连续反向无跳变。
  • [x] 实现眼白遮罩与原图纹理虹膜,实际放大查看中立与四角姿态,确保不覆盖眼睑或露出第二套瞳孔。
  • [x] 双眼最快响应,整头延后跟随,最大位移 6px/4px、倾斜 0.75°;离开缓缓回正。失焦、后台、离屏、偏好改变立即复位;触摸和 reduced-motion 保持原头像。
  • [x] 在真实浏览器验证小步和快速反向移动、中心死区、指针离开、静止停帧、失焦、滚动离屏、触摸、实时 reduced-motion 改变、亮暗主题和路由重挂载。后台状态通过同一复位处理器,未模拟真实系统后台切换。
  • [x] 核对现有首屏布局与链接,运行相关测试、完整构建及 diff 检查,保存截图与交互录屏,在当前预览展示结果。

用户已明确“开始做”,在当前已有改动的工作区继续执行,不额外要求选择执行方式,不部署、不自动提交用户的既有工作。

Last updated:

最后更新2026-10-25
觉得有帮助?把这个链接转给正在求职的朋友 · 用 Ctrl + K 全站搜索其它题