mirror of
https://github.com/unanmed/HumanBreak.git
synced 2026-11-01 15:44:30 +08:00
feat: 自动创建API文档目录
This commit is contained in:
AncTe committed
1 parent
1294c5f1ca
commit
3581e2604b
10 files changed
+1483
-313
No files matched your search
@@ -0,0 +1,367 @@
|
||||
# BlockCacher API 文档
|
||||
|
||||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
BlockCacher --> EventEmitter
|
||||
```
|
||||
|
||||
_继承自 `EventEmitter<BlockCacherEvent>`，支持事件监听。_
|
||||
|
||||
---
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 描述 |
|
||||
| ------------ | ---------------- | ------------------------------------------------------------------- |
|
||||
| `width` | `number` | 区域总宽度（元素单位） |
|
||||
| `height` | `number` | 区域总高度（元素单位） |
|
||||
| `blockSize` | `number` | 单个分块的大小（元素单位） |
|
||||
| `blockData` | `BlockData` | 分块计算结果（包含分块数量、最后一个块的尺寸等信息） |
|
||||
| `cacheDepth` | `number` | 缓存深度（每个分块可存储多个缓存层） |
|
||||
| `cache` | `Map<number, T>` | 缓存存储结构，键为精确索引（`(x + y * blockWidth) * depth + deep`） |
|
||||
|
||||
---
|
||||
|
||||
## 构造方法
|
||||
|
||||
### `constructor`
|
||||
|
||||
```typescript
|
||||
function constructor(
|
||||
width: number,
|
||||
height: number,
|
||||
size: number,
|
||||
depth?: number
|
||||
): BlockCacher<T>;
|
||||
```
|
||||
|
||||
创建分块缓存管理器并自动计算初始分块。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const cacher = new BlockCacher<ICanvasCacheItem>(800, 600, 64); // 800x600区域，64为分块大小
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 方法说明
|
||||
|
||||
### `size`
|
||||
|
||||
```typescript
|
||||
function size(width: number, height: number): void;
|
||||
```
|
||||
|
||||
重置区域尺寸并重新分块（触发 `split` 事件）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.size(1024, 768); // 重置为1024x768区域
|
||||
```
|
||||
|
||||
### `setBlockSize`
|
||||
|
||||
```typescript
|
||||
function setBlockSize(size: number): void;
|
||||
```
|
||||
|
||||
修改分块尺寸并重新分块（触发 `split` 事件）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.setBlockSize(128); // 分块大小改为128
|
||||
```
|
||||
|
||||
### `setCacheDepth`
|
||||
|
||||
```typescript
|
||||
function setCacheDepth(depth: number): void;
|
||||
```
|
||||
|
||||
调整缓存深度（最大 31），自动迁移旧缓存。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.setCacheDepth(3); // 每个分块支持3层缓存
|
||||
```
|
||||
|
||||
### `split`
|
||||
|
||||
```typescript
|
||||
function split(): void;
|
||||
```
|
||||
|
||||
重新计算分块数据并触发 `'split'` 事件。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.split(); // 手动触发分块计算（一般无需调用）
|
||||
```
|
||||
|
||||
### `clearCache`
|
||||
|
||||
```typescript
|
||||
function clearCache(index: number, deep: number): void;
|
||||
```
|
||||
|
||||
清除指定分块索引的缓存（按二进制掩码清除深度）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.clearCache(5, 0b101); // 清除分块5的第0层和第2层缓存
|
||||
```
|
||||
|
||||
### `clearCacheByIndex`
|
||||
|
||||
```typescript
|
||||
function clearCacheByIndex(index: number): void;
|
||||
```
|
||||
|
||||
直接按精确索引清除单个缓存。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.clearCacheByIndex(42); // 清除精确索引42对应的缓存
|
||||
```
|
||||
|
||||
### `clearAllCache`
|
||||
|
||||
```typescript
|
||||
function clearAllCache(): void;
|
||||
```
|
||||
|
||||
清空所有缓存并销毁关联资源。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
cacher.clearAllCache(); // 完全重置缓存
|
||||
```
|
||||
|
||||
### `getIndex`
|
||||
|
||||
```typescript
|
||||
function getIndex(x: number, y: number): number;
|
||||
```
|
||||
|
||||
根据分块坐标获取分块索引（分块坐标 -> 分块索引）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const index = cacher.getIndex(2, 3); // 获取(2,3)分块的索引
|
||||
```
|
||||
|
||||
### `getIndexByLoc`
|
||||
|
||||
```typescript
|
||||
function getIndexByLoc(x: number, y: number): number;
|
||||
```
|
||||
|
||||
根据元素坐标获取所属分块索引（元素坐标 -> 分块索引）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const index = cacher.getIndexByLoc(150, 200); // 元素坐标(150,200)所在分块索引
|
||||
```
|
||||
|
||||
### `getBlockXYByIndex`
|
||||
|
||||
```typescript
|
||||
function getBlockXYByIndex(index: number): [number, number];
|
||||
```
|
||||
|
||||
根据分块索引获取分块坐标（分块索引 -> 分块坐标）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const [x, y] = cacher.getBlockXYByIndex(5); // 分块5的坐标
|
||||
```
|
||||
|
||||
### `getBlockXY`
|
||||
|
||||
```typescript
|
||||
function getBlockXY(x: number, y: number): [number, number];
|
||||
```
|
||||
|
||||
获取一个元素位置所在的分块位置（即使它不在任何分块内）（元素索引 -> 分块坐标）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const [x, y] = cacher.getBlockXY(11, 24); // 指定位置所在分块位置
|
||||
```
|
||||
|
||||
### `getPreciseIndex`
|
||||
|
||||
```typescript
|
||||
function getPreciseIndex(x: number, y: number, deep: number): number;
|
||||
```
|
||||
|
||||
根据分块坐标与 `deep` 获取一个分块的精确索引（分块坐标 -> 分块索引）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const index = cacher.getPreciseIndex(2, 1, 3); // 指定分块的索引
|
||||
```
|
||||
|
||||
### `getPreciseIndexByLoc`
|
||||
|
||||
```typescript
|
||||
function getPreciseIndexByLoc(x: number, y: number, deep: number): number;
|
||||
```
|
||||
|
||||
根据元素坐标及 `deep` 获取元素所在块的精确索引（元素坐标 -> 分块索引）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const index = cacher.getPreciseIndexByLoc(22, 11, 3); // 指定元素所在分块的索引
|
||||
```
|
||||
|
||||
### `updateElementArea`
|
||||
|
||||
```typescript
|
||||
function updateElementArea(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
deep: number = 2 ** 31 - 1
|
||||
): Set<number>;
|
||||
```
|
||||
|
||||
根据元素区域清除相关分块缓存（返回受影响的分块索引集合）（元素坐标->分块清空）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const blocks = cacher.updateElementArea(100, 100, 200, 200); // 清除200x200区域内的缓存
|
||||
```
|
||||
|
||||
### `updateArea`
|
||||
|
||||
```typescript
|
||||
function updateArea(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
deep: number = 2 ** 31 - 1
|
||||
): Set<number>;
|
||||
```
|
||||
|
||||
更新指定分块区域内的缓存（注意坐标是分块坐标，而非元素坐标）（分块坐标->分块清空）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const blocks = cacher.updateArea(1, 1, 1, 1); // 清除指定分块区域内的缓存
|
||||
```
|
||||
|
||||
### `getIndexOf`
|
||||
|
||||
```typescript
|
||||
function getIndexOf(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number
|
||||
): Set<number>;
|
||||
```
|
||||
|
||||
传入分块坐标与范围，获取该区域内包含的所有分块索引（分块坐标->分块索引集合）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const blocks = cacher.getIndexOf(1, 1, 1, 1); // 清除指定分块区域内的缓存
|
||||
```
|
||||
|
||||
### `getIndexOfElement`
|
||||
|
||||
```typescript
|
||||
function getIndexOfElement(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number
|
||||
): Set<number>;
|
||||
```
|
||||
|
||||
传入元素坐标与范围，获取该区域内包含的所有分块索引（元素坐标->分块索引集合）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const blocks = cacher.getIndexOfElement(3, 5, 12, 23); // 清除指定元素区域内的缓存
|
||||
```
|
||||
|
||||
### `getRectOfIndex`
|
||||
|
||||
```typescript
|
||||
function getRectOfIndex(block: number): [number, number, number, number];
|
||||
```
|
||||
|
||||
获取分块索引对应的元素坐标范围（分块索引 -> 元素矩形坐标）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const [x1, y1, x2, y2] = cacher.getRectOfIndex(5); // 分块5的坐标范围
|
||||
```
|
||||
|
||||
### `getRectOfBlockXY`
|
||||
|
||||
```typescript
|
||||
function getRectOfBlockXY(
|
||||
x: number,
|
||||
y: number
|
||||
): [number, number, number, number];
|
||||
```
|
||||
|
||||
根据分块坐标，获取这个分块所在区域的元素矩形范围（左上角横纵坐标及右下角横纵坐标）（分块坐标 -> 元素矩形坐标）。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const [x1, y1, x2, y2] = cacher.getRectOfIndex(5); // 分块5的坐标范围
|
||||
```
|
||||
|
||||
### `destroy`
|
||||
|
||||
```typescript
|
||||
function destroy(): void;
|
||||
```
|
||||
|
||||
摧毁这个块缓存。
|
||||
|
||||
---
|
||||
|
||||
## 事件说明
|
||||
|
||||
| 事件名 | 参数 | 描述 |
|
||||
| ------- | ---- | ------------------ |
|
||||
| `split` | 无 | 分块参数变更时触发 |
|
||||
|
||||
---
|
||||
|
||||
## 总使用示例
|
||||
|
||||
```typescript
|
||||
// 创建缓存管理器
|
||||
const cacheManager = new BlockCacher<ICanvasCacheItem>(1024, 768, 64);
|
||||
|
||||
// 监听分块变化
|
||||
cacheManager.on('split', () => {
|
||||
console.log('分块已重新计算');
|
||||
});
|
||||
|
||||
// 添加测试缓存项
|
||||
const blockIndex = cacheManager.getIndex(2, 3);
|
||||
const preciseIndex = cacheManager.getPreciseIndex(2, 3, 0);
|
||||
cacheManager.cache.set(
|
||||
preciseIndex,
|
||||
new CanvasCacheItem(new MotaOffscreenCanvas2D(), 1)
|
||||
);
|
||||
|
||||
// 清除特定区域缓存
|
||||
cacheManager.updateElementArea(150, 150, 100, 100);
|
||||
|
||||
// 销毁管理器
|
||||
cacheManager.destroy();
|
||||
```
|
||||
@@ -0,0 +1,384 @@
|
||||
# Camera API 文档
|
||||
|
||||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
Camera --> EventEmitter
|
||||
```
|
||||
|
||||
_继承自 `EventEmitter<CameraEvent>`，支持事件监听。_
|
||||
|
||||
---
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 描述 |
|
||||
| --------------------- | ------------------- | ------------------------------------------------ |
|
||||
| `readonly binded` | `RenderItem` | 当前绑定的渲染元素 |
|
||||
| `transform` | `Transform` | 目标变换矩阵，默认与 `binded.transform` 共享引用 |
|
||||
| `protected operation` | `CameraOperation[]` | 当前应用的变换操作列表（平移/旋转/缩放） |
|
||||
|
||||
---
|
||||
|
||||
## 构造方法
|
||||
|
||||
### `Camera.for`
|
||||
|
||||
```typescript
|
||||
function for(item: RenderItem): Camera
|
||||
```
|
||||
|
||||
获取或创建与渲染元素关联的摄像机实例。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const item = new RenderItem();
|
||||
const camera = Camera.for(item); // 获取或创建摄像机
|
||||
```
|
||||
|
||||
### `constructor`
|
||||
|
||||
```typescript
|
||||
function constructor(item: RenderItem): Camera;
|
||||
```
|
||||
|
||||
直接创建摄像机实例（不会自动注册到全局映射）。
|
||||
**注意：** 推荐优先使用 `Camera.for()` 方法。
|
||||
|
||||
---
|
||||
|
||||
## 方法说明
|
||||
|
||||
### `disable`
|
||||
|
||||
```typescript
|
||||
function disable(): void;
|
||||
```
|
||||
|
||||
禁用摄像机变换效果。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
camera.disable(); // 暂停所有摄像机变换
|
||||
```
|
||||
|
||||
### `enable`
|
||||
|
||||
```typescript
|
||||
function enable(): void;
|
||||
```
|
||||
|
||||
启用摄像机变换效果。
|
||||
|
||||
### `requestUpdate`
|
||||
|
||||
```typescript
|
||||
function requestUpdate(): void;
|
||||
```
|
||||
|
||||
请求在下一帧强制更新变换矩阵。
|
||||
|
||||
### `removeOperation`
|
||||
|
||||
```typescript
|
||||
function removeOperation(operation: CameraOperation): void;
|
||||
```
|
||||
|
||||
移除一个变换操作。
|
||||
**参数说明**
|
||||
|
||||
- `operation`: 要移除的操作
|
||||
|
||||
**示例**
|
||||
|
||||
```ts
|
||||
const operation = camera.addTranslate();
|
||||
camera.removeOperation(operation);
|
||||
```
|
||||
|
||||
### `clearOperation`
|
||||
|
||||
```ts
|
||||
function clearOperation(): void;
|
||||
```
|
||||
|
||||
清空变换操作列表。
|
||||
|
||||
### `addTranslate`
|
||||
|
||||
```typescript
|
||||
function addTranslate(): ICameraTranslate;
|
||||
```
|
||||
|
||||
添加平移操作并返回操作对象。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const translateOp = camera.addTranslate();
|
||||
translateOp.x = 100; // 设置横向偏移
|
||||
camera.requestUpdate();
|
||||
```
|
||||
|
||||
### `addRotate`
|
||||
|
||||
```typescript
|
||||
function addRotate(): ICameraRotate;
|
||||
```
|
||||
|
||||
添加旋转操作并返回操作对象。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const rotateOp = camera.addRotate();
|
||||
rotateOp.angle = Math.PI / 2; // 设置90度旋转
|
||||
camera.requestUpdate();
|
||||
```
|
||||
|
||||
### `addScale`
|
||||
|
||||
```typescript
|
||||
function addScale(): ICameraScale;
|
||||
```
|
||||
|
||||
添加缩放操作并返回操作对象。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const scaleOp = camera.addScale();
|
||||
scaleOp.x = 2; // 横向放大2倍
|
||||
camera.requestUpdate();
|
||||
```
|
||||
|
||||
### `applyAnimation`
|
||||
|
||||
```ts
|
||||
function applyAnimation(time: number, update: () => void): void;
|
||||
```
|
||||
|
||||
施加动画。
|
||||
|
||||
**参数说明**
|
||||
|
||||
- `time`: 动画时长。
|
||||
- `update`: 每帧执行的更新函数。
|
||||
|
||||
### `applyTranslateAnimation`
|
||||
|
||||
```typescript
|
||||
function applyTranslateAnimation(
|
||||
operation: ICameraTranslate,
|
||||
animate: Animation,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为平移操作绑定动画。
|
||||
**参数说明：**
|
||||
|
||||
- `animate`: 预定义的动画实例
|
||||
- `time`: 动画持续时间（毫秒）
|
||||
|
||||
### `applyRotateAnimation`
|
||||
|
||||
```typescript
|
||||
function applyRotateAnimation(
|
||||
operation: ICameraRotate,
|
||||
animate: Animation,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为旋转操作绑定动画。
|
||||
|
||||
### `applyScaleAnimation`
|
||||
|
||||
```typescript
|
||||
function applyScaleAnimation(
|
||||
operation: ICameraScale,
|
||||
animate: Animation,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为缩放操作绑定动画。
|
||||
|
||||
### `applyTranslateTransition`
|
||||
|
||||
```typescript
|
||||
function applyTranslateTransition(
|
||||
operation: ICameraTranslate,
|
||||
animate: Transition,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为平移操作绑定渐变。
|
||||
**参数说明：**
|
||||
|
||||
- `animate`: 预定义的渐变实例
|
||||
- `time`: 渐变持续时间（毫秒）
|
||||
|
||||
### `applyRotateTransition`
|
||||
|
||||
```typescript
|
||||
function applyRotateTransition(
|
||||
operation: ICameraRotate,
|
||||
animate: Transition,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为旋转操作绑定渐变。
|
||||
|
||||
### `applyScaleTransition`
|
||||
|
||||
```typescript
|
||||
function applyScaleTransition(
|
||||
operation: ICameraScale,
|
||||
animate: Transition,
|
||||
time: number
|
||||
): void;
|
||||
```
|
||||
|
||||
为缩放操作绑定渐变。
|
||||
|
||||
### `stopAllAnimates`
|
||||
|
||||
```ts
|
||||
function stopAllAnimates(): void;
|
||||
```
|
||||
|
||||
停止所有动画。
|
||||
|
||||
### `destroy`
|
||||
|
||||
```typescript
|
||||
function destroy(): void;
|
||||
```
|
||||
|
||||
销毁摄像机并释放所有资源。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
camera.destroy(); // 解除绑定并清理动画
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 事件说明
|
||||
|
||||
| 事件名 | 参数 | 描述 |
|
||||
| --------- | ---- | ------------------ |
|
||||
| `destroy` | 无 | 摄像机被销毁时触发 |
|
||||
|
||||
---
|
||||
|
||||
## 总使用示例
|
||||
|
||||
::: code-group
|
||||
|
||||
```typescript [动画]
|
||||
import { Animation, linear } from 'mutate-animate';
|
||||
|
||||
// 获取摄像机实例
|
||||
const item = new Sprite();
|
||||
const camera = Camera.for(item);
|
||||
|
||||
// 添加平移和缩放操作
|
||||
const translate = camera.addTranslate();
|
||||
const scale = camera.addScale();
|
||||
|
||||
// 创建动画实例
|
||||
const anim = new Animation()
|
||||
.mode(linear())
|
||||
.time(1000)
|
||||
.move(100, 100)
|
||||
.time(800)
|
||||
.scale(1.5);
|
||||
|
||||
// 绑定动画
|
||||
camera.applyTranslateAnimation(translate, anim, 1000);
|
||||
camera.applyScaleAnimation(scale, anim, 800);
|
||||
|
||||
// 启用摄像机
|
||||
camera.enable();
|
||||
|
||||
// 销毁（当不再需要时）
|
||||
setTimeout(() => camera.destroy(), 2000);
|
||||
```
|
||||
|
||||
```typescript [渐变]
|
||||
import { Transition, hyper } from 'mutate-animate';
|
||||
// 获取摄像机实例
|
||||
const item = new Sprite();
|
||||
const camera = Camera.for(item);
|
||||
|
||||
// 添加平移和缩放操作
|
||||
const translate = camera.addTranslate();
|
||||
const scale = camera.addScale();
|
||||
|
||||
// 创建渐变实例，使用双曲正弦速率曲线
|
||||
const tran = new Transition().mode(hyper('sin', 'out')).time(1000);
|
||||
|
||||
// 初始化参数，这一步不会执行渐变
|
||||
tran.value.x = 0;
|
||||
tran.value.y = 0;
|
||||
tran.value.size = 0;
|
||||
|
||||
// 对参数执行渐变，直接设置即可
|
||||
tran.value.x = 100;
|
||||
tran.value.y = 200;
|
||||
tran.time(800); // 设置渐变时长为 800 毫秒
|
||||
tran.value.size = 1.5;
|
||||
|
||||
// 绑定动画
|
||||
camera.applyTranslateTransition(translate, tran, 1000);
|
||||
camera.applyScaleTransition(scale, tran, 800);
|
||||
|
||||
// 启用摄像机
|
||||
camera.enable();
|
||||
|
||||
// 销毁（当不再需要时）
|
||||
setTimeout(() => camera.destroy(), 2000);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 接口说明
|
||||
|
||||
### `ICameraTranslate`
|
||||
|
||||
```typescript
|
||||
interface ICameraTranslate {
|
||||
readonly type: 'translate';
|
||||
readonly from: RenderItem;
|
||||
x: number; // 横向偏移量
|
||||
y: number; // 纵向偏移量
|
||||
}
|
||||
```
|
||||
|
||||
### `ICameraRotate`
|
||||
|
||||
```typescript
|
||||
interface ICameraRotate {
|
||||
readonly type: 'rotate';
|
||||
readonly from: RenderItem;
|
||||
angle: number; // 旋转弧度值
|
||||
}
|
||||
```
|
||||
|
||||
### `ICameraScale`
|
||||
|
||||
```typescript
|
||||
interface ICameraScale {
|
||||
readonly type: 'scale';
|
||||
readonly from: RenderItem;
|
||||
x: number; // 横向缩放比
|
||||
y: number; // 纵向缩放比
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
# CameraAnimation API 文档
|
||||
|
||||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
CameraAnimation --> EventEmitter
|
||||
```
|
||||
|
||||
_继承自 `EventEmitter<CameraAnimationEvent>`，支持事件监听。_
|
||||
|
||||
---
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 描述 |
|
||||
| -------- | -------- | ---------------- |
|
||||
| `camera` | `Camera` | 关联的摄像机实例 |
|
||||
|
||||
---
|
||||
|
||||
## 构造方法
|
||||
|
||||
### `constructor`
|
||||
|
||||
```typescript
|
||||
function constructor(camera: Camera): CameraAnimation;
|
||||
```
|
||||
|
||||
创建摄像机动画管理器，需绑定到特定 `Camera` 实例。
|
||||
**示例：**
|
||||
|
||||
```typescript
|
||||
const camera = Camera.for(renderItem);
|
||||
const animation = new CameraAnimation(camera);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 方法说明
|
||||
|
||||
### `translate`
|
||||
|
||||
```typescript
|
||||
function translate(
|
||||
operation: ICameraTranslate,
|
||||
x: number,
|
||||
y: number,
|
||||
time: number,
|
||||
start: number,
|
||||
timing: TimingFn
|
||||
): void;
|
||||
```
|
||||
|
||||
为平移操作添加动画。
|
||||
**参数说明：**
|
||||
|
||||
- `x`, `y`: 目标偏移量（格子坐标，自动乘以 `32`，之后可能改动）
|
||||
- `time`: 动画持续时间（毫秒）
|
||||
- `start`: 动画开始时间（相对于总动画开始的延迟）
|
||||
- `timing`: 缓动函数（输入时间完成度，输出动画完成度）
|
||||
|
||||
### `rotate`
|
||||
|
||||
```typescript
|
||||
function rotate(
|
||||
operation: ICameraRotate,
|
||||
angle: number,
|
||||
time: number,
|
||||
start: number,
|
||||
timing: TimingFn
|
||||
): void;
|
||||
```
|
||||
|
||||
为旋转操作添加动画。
|
||||
**参数说明：**
|
||||
|
||||
- `angle`: 目标旋转弧度（如 `Math.PI` 表示 `180` 度）
|
||||
- 其余参考[`rotate`](#rotate)
|
||||
|
||||
### `scale`
|
||||
|
||||
```typescript
|
||||
function scale(
|
||||
operation: ICameraScale,
|
||||
scale: number,
|
||||
time: number,
|
||||
start: number,
|
||||
timing: TimingFn
|
||||
): void;
|
||||
```
|
||||
|
||||
为缩放操作添加动画。
|
||||
**参数说明：**
|
||||
|
||||
- `scale`: 目标缩放倍率（如 `1.5` 表示放大 `1.5` 倍）
|
||||
- 其余参考[`rotate`](#rotate)
|
||||
|
||||
### `start`
|
||||
|
||||
```typescript
|
||||
function start(): void;
|
||||
```
|
||||
|
||||
启动所有已添加的动画，按时间顺序执行。
|
||||
**注意：** 调用后动画将按 `start` 参数定义的顺序触发。
|
||||
|
||||
### `destroy`
|
||||
|
||||
```typescript
|
||||
function destroy(): void;
|
||||
```
|
||||
|
||||
销毁动画管理器并释放所有资源（停止未完成的动画）。
|
||||
|
||||
---
|
||||
|
||||
## 事件说明
|
||||
|
||||
| 事件名 | 参数 | 描述 |
|
||||
| --------- | -------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| `animate` | `operation: CameraOperation` <br> `execution: CameraAnimationExecution` <br> `item: CameraAnimationData` | 当某个动画片段开始执行时触发 |
|
||||
|
||||
---
|
||||
|
||||
## 总使用示例
|
||||
|
||||
```typescript
|
||||
import { hyper, trigo } from 'mutate-animate';
|
||||
|
||||
// 创建渲染元素和摄像机
|
||||
const renderItem = new Sprite();
|
||||
const camera = Camera.for(renderItem);
|
||||
|
||||
// 添加平移和旋转操作
|
||||
const translateOp = camera.addTranslate();
|
||||
const rotateOp = camera.addRotate();
|
||||
|
||||
// 创建动画管理器
|
||||
const animation = new CameraAnimation(camera);
|
||||
|
||||
// 添加平移动画：1秒后开始，持续2秒，横向移动3格（3*32像素）
|
||||
animation.translate(
|
||||
translateOp,
|
||||
3,
|
||||
0, // x=3, y=0（自动乘32）
|
||||
2000, // 动画时长2秒
|
||||
1000, // 延迟1秒开始
|
||||
hyper('sin', 'out') // 双曲正弦函数
|
||||
);
|
||||
|
||||
// 添加旋转动画：立即开始，持续1.5秒，旋转180度
|
||||
animation.rotate(
|
||||
rotateOp,
|
||||
Math.PI, // 目标角度（弧度）
|
||||
1500, // 动画时长1.5秒
|
||||
0, // 无延迟
|
||||
trigo('sin', 'out') // 正弦函数
|
||||
);
|
||||
|
||||
// 启动动画
|
||||
animation.start();
|
||||
|
||||
// 监听动画事件
|
||||
animation.on('animate', (operation, execution, item) => {
|
||||
console.log('动画片段开始:', item.type);
|
||||
});
|
||||
|
||||
// 销毁（动画结束后）
|
||||
setTimeout(() => {
|
||||
animation.destroy();
|
||||
camera.destroy();
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 接口说明
|
||||
|
||||
### `CameraAnimationExecution`
|
||||
|
||||
```typescript
|
||||
interface {
|
||||
data: CameraAnimationData[]; // 动画片段列表
|
||||
animation: Animation; // 关联的动画实例
|
||||
}
|
||||
```
|
||||
|
||||
### `CameraAnimationData`
|
||||
|
||||
```typescript
|
||||
type CameraAnimationData =
|
||||
| TranslateAnimation
|
||||
| TranslateAsAnimation
|
||||
| RotateAnimation
|
||||
| ScaleAnimation;
|
||||
```
|
||||
Reference in new issue
Block a user