lofter-lottie-opt 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +84 -307
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,371 +1,148 @@
1
1
  # Lottie Optimizer
2
2
 
3
- A plugin-based Lottie JSON optimizer with flexible plugin system for customizable optimization.
4
-
5
- ## Features
6
-
7
- ✅ **插件化架构**: 每个优化效果作为独立插件
8
- ✅ **灵活组合**: 用户可自由选择和组合插件
9
- ✅ **CLI 工具**: 命令行工具支持批量处理
10
- ✅ **编程接口**: 可在代码中直接使用的 API
11
- ✅ **质量控制**: 内置优化统计和警告系统
12
- ✅ **质量验证**: 完整的压缩前后对比和验证系统
13
- ✅ **视觉验证**: 播放能力测试和渲染验证
14
- ✅ **详细报告**: HTML 格式的综合分析报告
3
+ 插件化 Lottie JSON 优化器,灵活组合优化策略,大幅减小动画文件体积。
15
4
 
16
5
  ## 安装
17
6
 
18
7
  ```bash
19
- pnpm install
20
- pnpm build
8
+ npm install lofter-lottie-opt -g
9
+ #
10
+ pnpm add lofter-lottie-opt -g
21
11
  ```
22
12
 
23
- ## 使用方式
24
-
25
- ### CLI 使用
13
+ ## CLI 使用
26
14
 
27
15
  ```bash
28
- # 构建项目
29
- pnpm build
16
+ # 基础用法:优化 Lottie 文件(使用所有默认插件)
17
+ lottie-opt input.json output.json
30
18
 
31
- # 使用所有默认插件优化
32
- node dist/cli/index.js input.json output.json
19
+ # 指定使用特定插件
20
+ lottie-opt input.json -o output.json --plugins remove-unused-assets,simplify-paths
33
21
 
34
- # 指定特定插件
35
- node dist/cli/index.js input.json --plugins remove-unused-assets,simplify-paths
22
+ # 禁用某些插件
23
+ lottie-opt input.json --disable compress-images
36
24
 
37
- # 排除某些插件
38
- node dist/cli/index.js input.json --disable compress-images
39
-
40
- # 插件配置
41
- node dist/cli/index.js input.json --plugin-config simplify-paths.tolerance=0.5,compress-images.quality=balanced
25
+ # 自定义插件配置
26
+ lottie-opt input.json --plugin-config simplify-paths.tolerance=0.5,compress-images.quality=balanced
42
27
 
43
28
  # 查看可用插件
44
- node dist/cli/index.js --list-plugins
45
-
46
- # 配置调试工具
47
- node dist/cli/index.js input.json --show-config
48
- node dist/cli/index.js input.json --show-config-sources
29
+ lottie-opt --list-plugins
49
30
 
50
- # 详细报告和调试
51
- node dist/cli/index.js input.json --verbose --report
31
+ # 详细输出 + 生成报告
32
+ lottie-opt input.json --verbose --report
52
33
 
53
- # 质量验证和对比
54
- node dist/cli/index.js validate input.json --report --visual --playback
34
+ # 预览模式(不保存)
35
+ lottie-opt input.json --dry-run
55
36
  ```
56
37
 
57
- ### 质量验证命令
58
-
59
- 新增的 `validate` 命令提供完整的质量验证和压缩对比功能:
38
+ ### 质量验证
60
39
 
61
40
  ```bash
62
- # 基础验证
63
- node dist/cli/index.js validate input.json
64
-
65
- # 包含视觉验证的完整验证
66
- node dist/cli/index.js validate input.json --visual --playback
67
-
68
- # 生成详细 HTML 报告
69
- node dist/cli/index.js validate input.json --report
70
-
71
- # 自定义测试配置
72
- node dist/cli/index.js validate input.json --plugins remove-unused-assets,simplify-paths --report
41
+ # 验证 Lottie 文件质量
42
+ lottie-opt validate input.json
73
43
 
74
- # 完整验证(推荐)
75
- node dist/cli/index.js validate input.json --report --visual --playback
44
+ # 完整验证 + HTML 报告
45
+ lottie-opt validate input.json --report --visual --playback
76
46
  ```
77
47
 
78
- **验证功能说明:**
79
- - **结构验证**: 检查 Lottie JSON 格式完整性和规范性
80
- - **质量指标**: 计算结构完整性、动画连续性、数据一致性、性能评分
81
- - **视觉验证**: 模拟播放测试,检查渲染能力和性能指标
82
- - **压缩对比**: 多个预设同时测试,生成对比表格和推荐
83
- - **HTML 报告**: 生成美观的网页报告,包含所有验证结果
84
- ```
85
-
86
- ### 编程接口
48
+ ## 编程接口
87
49
 
88
50
  ```typescript
89
- import { optimize } from 'lottie-opt';
51
+ import { optimize } from 'lofter-lottie-opt';
90
52
 
91
53
  const result = await optimize(lottieData, {
92
54
  plugins: ['remove-unused-assets', 'minify-json', 'simplify-paths'],
93
55
  pluginOptions: {
94
- 'simplify-paths': { tolerance: 0.3, algorithm: 'rdp' },
95
- 'minify-json': { compressNames: false, keepMatchName: true }
56
+ 'simplify-paths': { tolerance: 0.3 },
57
+ 'minify-json': { compressNames: false }
96
58
  }
97
59
  });
98
60
 
99
- console.log(`优化: ${result.stats.originalSize} → ${result.stats.optimizedSize} bytes`);
61
+ console.log(`${result.stats.originalSize} → ${result.stats.optimizedSize} bytes`);
100
62
  console.log(`压缩率: ${result.stats.compressionRatio.toFixed(1)}%`);
101
63
  ```
102
64
 
103
- ## 配置系统
104
-
105
- ### 配置调试
106
-
107
- lottie-opt 提供强大的配置调试工具,帮助您理解参数如何生效:
65
+ ## CLI 参数
108
66
 
109
- ```bash
110
- # 查看每个插件的最终配置
111
- node dist/cli/index.js input.json --plugins compress-images --show-config
112
-
113
- # 查看配置来源(默认值 vs 用户值)
114
- node dist/cli/index.js input.json --plugins compress-images --show-config-sources
115
- ```
67
+ | 参数 | 说明 |
68
+ |------|------|
69
+ | `--plugins <list>` | 逗号分隔的插件列表 |
70
+ | `--disable <list>` | 禁用的插件列表 |
71
+ | `--plugin-config <config>` | 插件配置,格式 `plugin.option=value` |
72
+ | `-c, --config <path>` | 配置文件路径 |
73
+ | `-v, --verbose` | 详细日志 |
74
+ | `-r, --report` | 生成优化报告 |
75
+ | `--dry-run` | 仅分析不保存 |
76
+ | `--show-config` | 显示生效的配置 |
77
+ | `--list-plugins` | 列出可用插件 |
116
78
 
117
- 输出示例:
118
- ```
119
- [INFO] [compress-images] Configuration sources:
120
- Default options: {
121
- "quality": "balanced", ← 插件默认值
122
- "enableWebp": true,
123
- "enableAvif": false
124
- }
125
- User options: {
126
- "quality": "lossless", ← 用户配置覆盖了默认值
127
- "enableWebp": true,
128
- "enableAvif": false
129
- }
130
- ```
79
+ ## 可用插件
131
80
 
132
- ### 配置验证与建议
81
+ ### remove-unused-assets
133
82
 
134
- 系统会自动验证配置并提供优化建议:
83
+ **清理未使用的资源**,安全无损。BFS 算法扫描,支持预合成嵌套检测。
135
84
 
136
85
  ```bash
137
- # 使用可能有冲突的配置
138
- node -e "
139
- const opt = new (require('./dist/core/optimizer').LottieOptimizer)();
140
- opt.optimize({layers:[]}, {
141
- plugins: ['compress-images', 'simplify-paths'],
142
- pluginOptions: {
143
- 'compress-images': { quality: 'lossless', enableAvif: true, longEdge: 0 },
144
- 'simplify-paths': { tolerance: 2.0 }
145
- },
146
- debug: { showConfigSources: true }
147
- });
148
- "
149
- ```
150
-
151
- 输出:
152
- ```
153
- [INFO] [compress-images] Suggestions: 使用无损质量时,现代格式的优势较小,考虑使用 balanced 质量
154
- [WARN] Configuration conflicts detected:
155
- - 配置冲突:compress-images 使用无损质量,但 simplify-paths 的容差较大
156
- - 性能警告:启用了 AVIF 且未限制图像尺寸,可能导致处理时间过长
86
+ lottie-opt input.json --plugins remove-unused-assets
157
87
  ```
158
88
 
159
- ### 配置优先级
89
+ ### simplify-paths
160
90
 
161
- 配置按以下优先级合并(从高到低):
162
- 1. **用户直接传入的配置**
163
- 2. **插件默认配置**
91
+ **路径简化**,使用 RDP 算法减少贝塞尔曲线控制点。
164
92
 
165
- 详细配置指南请参考 [配置系统文档](docs/configuration-guide.md)。
93
+ | 配置项 | 默认值 | 说明 |
94
+ |--------|--------|------|
95
+ | `tolerance` | `1.0` | 误差容忍度(像素) |
96
+ | `mode` | `static-only` | 模式:`static-only` / `animated-consistent` / `all` |
97
+ | `minPoints` | `6` | 每条路径最少保留点数 |
98
+ | `preserveCorners` | `true` | 保留尖角 |
166
99
 
167
- ### compress-images 插件配置
168
-
169
- `compress-images` 插件使用简化的压缩策略,专注于文件大小优化:
170
-
171
- ```typescript
172
- import { optimize } from 'lottie-opt';
173
-
174
- const result = await optimize(lottieData, {
175
- plugins: ['compress-images'], // 启用图像压缩插件
176
- pluginOptions: {
177
- 'compress-images': {
178
- enableWebp: true, // 启用 WebP 格式(推荐)
179
- enableAvif: false, // 启用 AVIF 格式(更小但处理较慢)
180
- quality: 'balanced', // 质量档位:smallest/balanced/lossless
181
- longEdge: 1920, // 限制最长边像素
182
- embed: true, // 内嵌为 Data URL
183
- onLog: console.log, // 启用日志
184
- }
185
- }
186
- });
187
- ```
188
-
189
- **简化的压缩策略**:
190
- - **质量档位**: 为每个档位预设多个质量级别进行测试
191
- - `smallest`: [75, 60, 45] - 最小文件大小
192
- - `balanced`: [85, 75, 60] - 质量与大小平衡
193
- - `lossless`: [95, 85, 75] - 高质量压缩
194
- - **格式优先级**: 按用户偏好测试 WebP → AVIF → 传统格式
195
- - **自动选择**: 直接选择文件大小最小的结果
196
- - **透明度处理**: 自动选择 PNG(透明)或 JPEG(不透明)作为保底
197
-
198
- ### minify-json 插件配置
199
-
200
- `minify-json` 插件专注于 JSON 结构层面的精简优化:
201
-
202
- ```typescript
203
- import { optimize } from 'lottie-opt';
204
-
205
- const result = await optimize(lottieData, {
206
- plugins: ['minify-json'],
207
- pluginOptions: {
208
- 'minify-json': {
209
- removeMetadataKeys: true, // 删除 ix、mn、bm、ddd、np、cix 等元数据键
210
- enableGlobalPrecision: true, // 全局数值精度控制,统一截取到3位小数
211
- removeDefaultValues: true, // 删除 bm:0、ddd:0、hd:false 等默认值
212
- keepMatchName: true, // 保留 matchName(mn)以确保工具兼容性
213
- compressNames: true, // 压缩名称字段为单字符(影响调试)
214
- keepIds: false, // ID 短名化,长ID转36进制短码
215
- mergeNearbyNumbers: false, // 合并相邻数值(激进优化)
216
- }
217
- }
218
- });
219
- ```
220
-
221
- **JSON 精简策略**:
222
- - **元数据清理**: 删除渲染无关的索引、混合模式、3D标记等元数据键
223
- - **精度控制**: 全局统一数值精度,从平均2.97位小数降到3位小数上限
224
- - **默认值删除**: 系统性删除 bm:0、ddd:0、ao:0、sr:1、hd:false 等默认值
225
- - **名称压缩**: 可选将 nm 字段压缩为单字符(修/描/填/变等)
226
- - **ID优化**: 长ID转换为36进制短码,大幅减少字符数
100
+ ```bash
101
+ lottie-opt input.json --plugin-config simplify-paths.tolerance=0.5,simplify-paths.preserveCorners=true
227
102
  ```
228
103
 
229
- ## 可用插件
230
-
231
- ### 核心优化插件
232
- - `remove-unused-assets`: 清理未引用资源(安全无损)
233
- - `simplify-paths`: 路径简化(RDP算法,可控有损)
234
- - `compress-images`: 图像压缩和优化(高级优化)
235
- - `minify-json`: JSON结构精简(删除元数据、降低精度、压缩体积)
236
-
237
- ### 使用建议
238
- - **保守优化**: 使用 `remove-unused-assets`
239
- - **平衡优化**: 使用 `remove-unused-assets` + `minify-json` + `simplify-paths`
240
- - **激进优化**: 使用所有插件(默认行为)
104
+ ### compress-images
241
105
 
242
- ## 优化效果
106
+ **图像压缩**,支持 WebP/AVIF/JPEG/PNG,自动选择最小体积格式。
243
107
 
244
- **实际测试效果:**
245
-
246
- | 文件类型 | 基础优化 | 平衡优化 | 完整优化 | 质量保持 |
247
- |---------|----------|----------|----------|----------|
248
- | 简单动画 (2KB) | 10.9% | 10.9% | 10.9% | 100% |
249
- | 复杂动画 (156KB) | 0.1% | 0.1% | 67.3% | 100% |
250
-
251
- **插件特殊效果:**
252
- - **compress-images**: Sharp 图像压缩(简化版),支持 WebP/AVIF/JPEG/PNG,自动选择最小文件大小
253
- - **remove-unused-assets**: BFS 算法安全清理未引用资源,支持预合成嵌套
254
- - **simplify-paths**: RDP 算法路径简化,误差受控的贝塞尔曲线优化
255
- - **minify-json**: JSON精简优化,删除元数据键、降低数值精度、压缩名称字段
256
-
257
- ## 项目架构
258
-
259
- ```
260
- src/
261
- ├── core/ # 核心优化引擎
262
- ├── plugins/ # 插件实现(平铺结构,无分类文件夹)
263
- │ ├── remove-unused-assets/ # BFS 算法清理未引用资源
264
- │ ├── simplify-paths/ # RDP 算法路径简化
265
- │ ├── compress-images/ # Sharp 图像压缩(简化版)
266
- │ ├── minify-json/ # JSON结构精简优化
267
- │ └── index.ts # 插件注册
268
- ├── plugins/ # 插件实现(平铺结构)
269
- ├── cli/ # 命令行工具
270
- ├── validation/ # 质量验证系统
271
- ├── testing/ # 对比测试工具
272
- ├── utils/ # 工具函数
273
- └── types/ # 类型定义
274
- ```
275
-
276
- **插件系统特点:**
277
- - **平铺架构**: 所有插件文件位于 `plugins/` 根目录,便于管理和扩展
278
- - **自由组合**: 用户可以自由选择任意插件组合
279
- - **无预设依赖**: 移除了预设系统,简化了架构
280
- - **灵活配置**: 每个插件都可独立配置参数
281
- - **简化维护**: 新增插件只需添加到 `plugins/` 目录
282
-
283
- ## 开发状态
284
-
285
- ✅ **已完成**:
286
- - **核心架构**: 插件化架构系统
287
- - **CLI 工具**: 完整的命令行接口和编程 API
288
- - **核心插件**: 4个实际可用插件
289
- - `remove-unused-assets`: BFS 算法安全清理未引用资源
290
- - `simplify-paths`: RDP 算法路径简化
291
- - `compress-images`: Sharp 图像压缩(简化版,文件大小优先策略)
292
- - `minify-json`: JSON结构精简(删除元数据、降低精度、压缩体积)
293
- - **算法实现**: RDP 路径简化算法,BFS 资源清理算法
294
- - **图像处理**: Sharp 真实图像压缩,支持 WebP/AVIF/JPEG/PNG
295
- - **质量系统**: 完整的质量验证和对比测试框架
296
- - **可视化报告**: HTML 格式的详细分析报告
297
- - **视觉验证**: 播放能力测试和渲染验证
298
-
299
- ✅ **质量验证系统功能**:
300
- - 结构完整性验证
301
- - 动画连续性检查
302
- - 数据一致性分析
303
- - 性能指标计算
304
- - 多预设压缩对比
305
- - 视觉播放验证
306
- - HTML 详细报告生成
307
-
308
- 🚧 **待完成**:
309
- - 像素级回归测试 (SSIM/RMSE)
310
- - ZIP 格式的完整 .lottie 包结构
311
- - 更多图像格式支持和优化算法
312
-
313
- ## 使用示例
314
-
315
- ### 完整的质量验证工作流
108
+ | 配置项 | 默认值 | 说明 |
109
+ |--------|--------|------|
110
+ | `enableWebp` | `true` | 启用 WebP |
111
+ | `enableAvif` | `false` | 启用 AVIF(更小但处理慢) |
112
+ | `quality` | `balanced` | 质量档位:`smallest` / `balanced` / `lossless` |
113
+ | `longEdge` | `0` | 限制最长边像素,0=不限制 |
114
+ | `embed` | `true` | 内嵌为 Data URL |
115
+ | `useTinyPNG` | `false` | 使用 TinyPNG 压缩 |
316
116
 
317
117
  ```bash
318
- # 1. 先验证原始文件质量
319
- node dist/cli/index.js validate input.json --visual --playback
320
-
321
- # 2. 生成完整的对比报告
322
- node dist/cli/index.js validate input.json --report --visual --playback
323
-
324
- # 3. 根据推荐选择最佳预设进行优化
325
- node dist/cli/index.js input.json output.json --preset aggressive --report
326
-
327
- # 4. 验证优化后的文件
328
- node dist/cli/index.js validate output.json --visual --playback
118
+ lottie-opt input.json --plugin-config compress-images.enableWebp=true,compress-images.quality=smallest
329
119
  ```
330
120
 
331
- ### 实际测试示例
332
-
333
- 基于真实项目测试:
334
-
335
- ```bash
336
- # 简单动画文件(主要优化未使用资源)
337
- $ node dist/cli/index.js simple.json --plugins remove-unused-assets --verbose
338
- ✓ Optimization Results: 424 B → 356 B (16.0% reduction)
339
-
340
- # 包含图片的复杂动画(所有插件优化)
341
- $ node dist/cli/index.js complex_with_images.json --report
342
- ✓ Optimization Results: 156KB → 51KB (67.3% reduction)
343
- Plugin Details:
344
- - remove-unused-assets: 156KB → 156KB (0.0%)
345
- - simplify-paths: 156KB → 155KB (0.6%)
346
- - compress-images: 155KB → 51KB (67.1%) ⚡ 主要优化
347
- ```
121
+ ### minify-json
348
122
 
349
- ### 验证报告示例
123
+ **JSON 结构精简**,删除元数据、降低精度、压缩名称。
350
124
 
351
- 质量验证会生成类似以下的对比表格:
125
+ | 配置项 | 默认值 | 说明 |
126
+ |--------|--------|------|
127
+ | `removeMetadataKeys` | `true` | 删除 ix/mn/bm/ddd 等元数据 |
128
+ | `enableGlobalPrecision` | `true` | 全局数值精度控制 |
129
+ | `removeDefaultValues` | `true` | 删除默认值(bm:0, hd:false 等) |
130
+ | `keepMatchName` | `true` | 保留 matchName 兼容性 |
131
+ | `compressNames` | `true` | 压缩名称为单字符 |
132
+ | `keepIds` | `false` | 保留原始 ID(否则转短码) |
352
133
 
353
- ```
354
- ┌─────────────┬─────────────┬─────────────┬──────────────┬────────────┐
355
- │ Config │ Compression │ Quality │ Playback │ Rating │
356
- ├─────────────┼─────────────┼─────────────┼──────────────┼────────────┤
357
- │ basic │ 10.9% │ 100.0% │ Yes │ Good │
358
- │ balanced │ 10.9% │ 100.0% │ Yes │ Good │
359
- │ complete │ 67.3% │ 100.0% │ Yes │ Excellent │
360
- └─────────────┴─────────────┴─────────────┴──────────────┴────────────┘
361
-
362
- 🏆 Recommended: Complete optimization
134
+ ```bash
135
+ lottie-opt input.json --plugin-config minify-json.compressNames=false,minify-json.keepIds=true
363
136
  ```
364
137
 
365
- ## 贡献
138
+ ## 推荐配置
366
139
 
367
- 这是一个基于研究的 Lottie 优化器实现,遵循 LottieFiles 的优化原理并使用成熟的算法进行路径简化和质量验证。
140
+ | 场景 | 命令 |
141
+ |------|------|
142
+ | 保守优化 | `--plugins remove-unused-assets` |
143
+ | 平衡优化 | `--plugins remove-unused-assets,minify-json,simplify-paths` |
144
+ | 激进优化 | 默认(全部插件) |
368
145
 
369
146
  ## 许可证
370
147
 
371
- MIT
148
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lofter-lottie-opt",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A plugin-based Lottie JSON optimizer with configurable presets",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -51,7 +51,7 @@
51
51
  "lint": "eslint src --ext .ts",
52
52
  "clean": "rimraf dist",
53
53
  "changeset": "changeset",
54
- "version": "changeset version",
55
- "release": "pnpm build && changeset publish"
54
+ "version": "changeset version && git add -A && git commit -m \"chore: version packages\"",
55
+ "release": "pnpm run build && changeset publish && git push && git push --tags"
56
56
  }
57
57
  }