nanhaoluo
4515831d7f
- 删除临时测试文件 (test-*.html, test-*.js) - 删除临时文档文件 (GPU_ACCELERATION_USAGE.md, RENDER_OPTIMIZER_USAGE.md) - 删除测试 HTML 文件 (argon-memory-manager.test.html, argon-performance.test.html) - 整理文档到 specs 目录下
51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# GPU 加速管理使用指南
|
|
|
|
## 概述
|
|
|
|
`ArgonRenderOptimizer` 提供 GPU 加速管理功能，包括启用/禁用 GPU 加速、限制动画数量（最多 3 个）、自动管理动画队列。
|
|
|
|
## 核心方法
|
|
|
|
### startAnimation(element, animationFn)
|
|
启动动画，自动管理 GPU 加速和队列。
|
|
|
|
```javascript
|
|
const optimizer = new ArgonRenderOptimizer();
|
|
const element = document.querySelector('.box');
|
|
|
|
optimizer.startAnimation(element, (el) => {
|
|
el.style.transform = 'translateY(-50px)';
|
|
el.style.transition = 'transform 0.5s ease';
|
|
|
|
setTimeout(() => {
|
|
el.style.transform = '';
|
|
optimizer.endAnimation(el);
|
|
}, 500);
|
|
});
|
|
```
|
|
|
|
### endAnimation(element)
|
|
结束动画，自动禁用 GPU 加速并启动队列中的下一个动画。
|
|
|
|
```javascript
|
|
optimizer.endAnimation(element);
|
|
```
|
|
|
|
## 最佳实践
|
|
|
|
1. **始终调用 endAnimation()** - 确保资源释放
|
|
2. **监听动画完成事件** - 使用 animationend/transitionend
|
|
3. **页面卸载时清理** - 调用 clearAllAnimations()
|
|
|
|
## 性能建议
|
|
|
|
- 仅对需要动画的元素启用 GPU 加速
|
|
- 利用系统自动管理的动画队列
|
|
- 避免同时运行超过 3 个动画
|
|
|
|
## 验证需求
|
|
|
|
- ✅ 需求 5.2: 使用 will-change 创建合成层
|
|
- ✅ 需求 5.3: 动画完成时移除 will-change
|
|
- ✅ 需求 5.5: 限制同时运行动画数量不超过 3 个
|