2.5[frontEnd]

requestAnimationFrame 是 浏览器原生 API ，定义在 window 对象中，属于 Web API 的一部分。无需任何导入即可直接使用，其类型定义包含在 TypeScript 标准库中。

1. React 组件挂载时执行该 useEffect

2. 初始化节流计时器 lastEmit 和 25ms 触发间隔

3. 绑定 mousemove 事件监听器

4. 事件触发时通过时间

5. 作用：定义基础色相值 (0-360)

6. 技术原理 ：

   在后续样式通过 hsl(var(--hue), 饱和度, 明度) 生成颜色

   (例：hsl(120, 95%, 70%) = 高饱和度绿色)

7. 差实现节流控制

参数	作用	值域
spark-emit	指定关键帧动画名称	自定义动画
${lifeTime}s	动画持续时间	0.4-1秒
ease-out	缓动函数 (先快后慢)	贝塞尔曲线
forwards	保持动画结束状态	防止回弹

motion.nav 是 Framer Motion 库提供的一个组件，用于为 HTML 元素（这里是 <nav>）添加动画效果

• transform 是 CSS 中用于对元素进行变换的属性，支持平移（translate）、旋转（rotate）、缩放（scale）等操作。

• 与直接修改 left 和 top 不同，transform 不会触发浏览器的重排（reflow），而是触发重绘（repaint），因此性能更高。

• 修改 opacity 只会触发重绘（repaint），而不会触发重排（reflow），因此性能较高。

.element {

transform: translate(100px, 50px); /* 将元素向右移动 100px，向下移动 50px */

}

1. 重排（Reflow）：

   • 当元素的几何属性（如 width、height、left、top 等）发生变化时，浏览器需要重新计算元素的布局，这个过程称为重排。

   • 重排是非常耗性能的操作，尤其是在频繁修改布局属性时。

2. 重绘（Repaint）：

   • 当元素的非几何属性（如 color、background-color、opacity 等）发生变化时，浏览器只需要重新绘制元素，而不需要重新计算布局，这个过程称为重绘。

   • 重绘的性能开销比重排小得多。

3. 合成（Composite）：

   • 当使用 transform 和 opacity 时，浏览器会将元素提升到一个单独的图层（layer），并在 GPU 中进行合成。

   • 这种方式可以避免重排和重绘，性能最高。

百分比（%）的含义

• 参考系 ：translate 中的百分比是基于 元素自身的尺寸。

  • 例如，translate(50%, 50%) 表示元素在水平方向上移动自身宽度的 50%，在垂直方向上移动自身高度的 50%。

• 行为：

  • 如果元素的宽度是 100px，高度是 50px，那么 translate(50%, 50%) 会将元素向右移动 50px，向下移动 25px。

  • 百分比的值是动态的，会随着元素尺寸的变化而变化。

像素（px）的含义

• 参考系 ：translate 中的像素是基于 固定的像素值。

  • 例如，translate(100px, 50px) 表示元素在水平方向上移动 100px，在垂直方向上移动 50px。

motion.nav

├── div (容器)

│ ├── a (Logo)

│ ├── div (桌面导航)

│ │ └── a*4 (导航项)

│ └── button (移动端菜单按钮)

└── div (移动端菜单)

└── a*4 (导航项)

dragConstraints 是 Framer Motion 中的一个属性，用于定义拖动组件时的边界限制。它决定了组件在拖动时可以移动的范围。