IT评测·应用市场-qidao123.com

标题: 2.5[frontEnd] [打印本页]

作者: 南飓风 时间: 2025-3-17 07:20
标题: 2.5[frontEnd]
requestAnimationFrame 是 浏览器原生 API，定义在 window 对象中，属于 Web API 的一部分。无需任何导入即可直接使用，其类型定义包含在 TypeScript 标准库中。

React 组件挂载时实行该 useEffect
初始化节流计时器 lastEmit 和 25ms 触发间隔
绑定 mousemove 事件监听器
事件触发时通过时间
作用：定义基础色相值 (0-360)
技术原理：
在后续样式通过 hsl(var(--hue), 饱和度, 明度) 天生颜色
(例：hsl(120, 95%, 70%) = 高饱和度绿色)
差实现节流控制

参数作用值域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 */
}

重排（Reflow）：
- 当元素的多少属性（如 width、height、left、top 等）发生变化时，浏览器需要重新计算元素的布局，这个过程称为重排。
- 重排好坏常耗性能的操作，尤其是在频仍修改布局属性时。
重绘（Repaint）：
- 当元素的非多少属性（如 color、background-color、opacity 等）发生变化时，浏览器只需要重新绘制元素，而不需要重新计算布局，这个过程称为重绘。
- 重绘的性能开销比重排小得多。
合成（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 中的一个属性，用于定义拖动组件时的边界限制。它决定了组件在拖动时可以移动的范围。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)