跳到主要内容

交互动效原理说明

1. 设计目标​

动效设计的核心目标是引导注意力和解释关系。通过平滑的过渡和及时的反馈，帮助用户建立对课程体系的心理模型。

2. 核心动效策略​

2.1 渐进式入场 (Staggered Entrance)​

  • 原理：避免一次性加载过多信息导致认知过载。
  • 实现：
    • 课程卡片按顺序（index * 0.02s）依次淡入。
    • 初始状态：opacity: 0, scale: 0.8。
    • 结束状态：opacity: 1, scale: 1。
    • 曲线：easeOut。

2.2 路径追踪 (Path Tracing)​

  • 原理：模拟知识流动的方向，强化“前置->后继”的逻辑关系。
  • 实现：
    • 使用 SVG stroke-dasharray 和 stroke-dashoffset 技术。
    • framer-motion 的 pathLength 属性从 0 动画至 1。
    • 持续时间：0.8s，略慢于卡片入场，形成视觉引导。

2.3 微交互反馈 (Micro-interactions)​

  • 卡片悬停 (Hover)：

    • 缩放：卡片放大至 105% (scale: 1.05)，提升层级 (z-index)。
    • 阴影：投射带有主色调的弥散阴影 (box-shadow)，增强悬浮感。
    • 聚焦：非相关节点透明度降低 (opacity: 0.3)，产生“聚光灯”效果。

  • 连线高亮：

    • 当悬停某课程时，其前置课程连线变为红色（表示输入/基础），后继课程连线变为蓝色（表示输出/应用）。
    • 线宽增加至 2.5px。

3. 性能优化 (Performance)​

3.1 60FPS 渲染保障​

  • 硬件加速：主要动画属性 (transform, opacity) 均可触发 GPU 加速，避免重排 (Reflow)。
  • React 渲染优化：
    • 使用 useMemo 缓存节点位置计算结果。
    • 使用 framer-motion 的 layout 属性处理平滑过渡。

3.2 DOM 节点管理​

  • 使用 AnimatePresence 管理组件的卸载动画（虽然本图谱主要为静态结构，但在路由切换时有效）。
  • 连线层位于 z-index: 0，卡片层位于 z-index: 10，悬浮层位于 z-index: 50，减少层级重绘影响。

4. 智能路径算法 (Smart Routing)​

  • 贝塞尔曲线优化：
    • 基础路径为三次贝塞尔曲线 (C)。
    • 避让逻辑：当起点与终点跨度较大且有垂直高度差时，算法自动调整控制点 (Control Points) 的 Y 轴坐标，增加曲线的弯曲度，从而减少直线穿越中间节点的情况。
    • 公式：curvature = min(abs(dy) * 0.2, 50)。

文档生成日期：2026-01-18