Skip to content

Commit 5ff20aa

Browse files
authored
Merge pull request #26 from flycran/docs/trim-comments-and-descriptions
docs: 精简源码注释,修正参数描述与文档
2 parents 886e72e + eba372b commit 5ff20aa

13 files changed

Lines changed: 89 additions & 184 deletions

‎README.md‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,17 @@ Inspired by [Orta Therox](https://github.com/Orta). Thanks Orta for your outstan
4141
| `text` | ❌ | `username` value | Text to display as collision obstacles |
4242
| `output-path` | ❌ | `gravity.svg` | Path to write the generated SVG file |
4343
| `font-size` | ❌ | `48` | Font size of the collision text |
44-
| `compression-tolerance` | ❌ | `0.5` | Trajectory compression tolerance in SVG pixels. At every original moment, the animated position stays within this distance of the real one. The default fits most cases; `0` is lossless in both position and timing (see below) |
44+
| `compression-tolerance` | ❌ | `0.5` | Trajectory compression tolerance in SVG pixels. At every original moment, the animated position stays within this distance of the real one; `0` is lossless in both position and timing (see below) |
4545
| `compression-algorithm` | ❌ | `Greedy` | Trajectory compression algorithm: `Greedy` (fast), `DP` (smallest SVG), `RDP` (fastest). See below for the trade-offs |
46-
| `max-simulation-time` | ❌ | - | Maximum simulation time in seconds, counted as playback duration (simulated time = this value × `speed`). When reached, the trajectory simulated so far is returned instead of waiting for every block to settle. Leave empty to simulate until all blocks rest |
46+
| `max-simulation-time` | ❌ | - | Maximum animation playback duration in seconds. Once reached, blocks freeze where they are instead of waiting for every block to settle. Leave empty to play until all blocks rest |
4747
| `shape` | ❌ | `circle` | Shape of contribution blocks: `circle` or `square` |
4848
| `friction` | ❌ | `0.3` | Friction coefficient of the contribution blocks |
49-
| `restitution` | ❌ | `0` | Restitution (bounciness) of the contribution blocks. Values far from 0 may fling blocks out of the visible area; blocks falling below the world bottom are removed |
49+
| `restitution` | ❌ | `0` | Restitution (bounciness) of the contribution blocks. Values far from 0 may fling blocks out of the visible area |
5050
| `text-top` | ❌ | `50` | Distance from the top of the world to the text |
5151
| `background-color` | ❌ | `transparent` | Background color of the SVG (CSS color value) |
5252
| `text-color` | ❌ | `black` | Color of the collision text (CSS color value) |
53-
| `scale` | ❌ | `3` | Display zoom factor: the SVG `width`/`height` are the physics dimensions × scale, while the viewBox keeps the raw physics size |
54-
| `speed` | ❌ | `3` | Playback speed multiplier: the animation duration is the simulated time ÷ speed |
53+
| `scale` | ❌ | `3` | Overall zoom applied to the final SVG; does not change the actual size of the physics world |
54+
| `speed` | ❌ | `3` | Playback speed multiplier: the higher the value, the faster the animation plays |
5555
| `css` | ❌ | `false` | Use the CSS animation engine instead of SMIL `animateTransform`. See below |
5656
| `animation` | ❌ | `var(--n) var(--dur) linear both` | Custom CSS `animation` value for the CSS engine. ⚠️ Modify with caution — a wrong value breaks the animation. Requires `css: true` |
5757
| `width` | ❌ | `300` | Width of the physics world. ⚠️ Affects layout and SVG size |
@@ -62,7 +62,7 @@ Inspired by [Orta Therox](https://github.com/Orta). Thanks Orta for your outstan
6262

6363
### Reducing file size
6464

65-
The trajectory is compressed by default: `compression-tolerance` (default `0.5`) merges
65+
The trajectory is compressed by default: `compression-tolerance` merges
6666
trajectory points into keyframes so that, at every original moment, the interpolated
6767
position stays within the given distance (in SVG pixels) of the real one — speed changes
6868
such as bounces, landings and stops keep their real pace.
@@ -92,16 +92,15 @@ Two output engines are available; both produce a single static SVG file and play
9292
same trajectory at the same pace:
9393

9494
- **SMIL** (default) drives every block with `<animateTransform>` elements.
95-
- **CSS** (`css: true`) drops those elements and declares all animations in one
96-
self-contained `<style>` block: each block's trajectory becomes a `@keyframes` rule.
95+
- **CSS** (`css: true`) drives every block with a CSS `animation` declaration.
9796

9897
The rendered animation is identical. Choose CSS when the target environment handles
9998
SMIL poorly — some sanitizers strip SMIL animation elements, while CSS animation in
10099
SVG is more widely supported (GitHub READMEs load SVGs via `<img>`, where both work).
101100
The CSS output is slightly larger than SMIL.
102101

103102
With `css: true`, the `animation` input replaces the animation declaration applied to
104-
every block (default `var(--n) var(--dur) linear both`). Available variables:
103+
every block. Available variables:
105104

106105
- `--n` — each block's keyframes name, required
107106
- `--dur` — the playback duration
@@ -116,8 +115,7 @@ Must not contain braces, semicolons or `]]>`.
116115
size. The contribution blocks are laid out from `size` and `interval`, the text is centered
117116
with `width`, and the drop height follows `height` — change them together and re-check the
118117
result rather than tweaking one in isolation. If the simulation fails to settle after your
119-
changes, set `max-simulation-time` to cap the simulation and still get the trajectory up to
120-
that point.
118+
changes, set `max-simulation-time` to cap the animation duration and still get the SVG.
121119

122120
`font-path` swaps the collision font. It accepts a local `.ttf`/`.otf` path or an `http(s)` URL.
123121
The bundled Liberation Serif Bold is used by default because its contours are clean and
@@ -127,7 +125,6 @@ decompose stably. Custom fonts are not guaranteed to work:
127125
collision shapes.
128126
- Some fonts cannot be parsed by opentype.js at all (common ones such as DejaVu fail on their
129127
GSUB tables).
130-
- Different font metrics usually require re-tuning `font-size` and `text-top`.
131128

132129
### Outputs
133130

‎README_zh.md‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,17 @@
4040
| `text` | ❌ | `username` 的值 | 作为碰撞障碍物的文字 |
4141
| `output-path` | ❌ | `gravity.svg` | SVG 输出路径 |
4242
| `font-size` | ❌ | `48` | 碰撞文字大小 |
43-
| `compression-tolerance` | ❌ | `0.5` | 轨迹压缩容差(SVG 像素)。播放时每个原始时刻的动画位置与真实位置的偏差不超过该值。默认值适合多数场景;`0` 为完全无损(位置与节奏都精确)(见下文) |
43+
| `compression-tolerance` | ❌ | `0.5` | 轨迹压缩容差(SVG 像素)。播放时每个原始时刻的动画位置与真实位置的偏差不超过该值;`0` 为完全无损(位置与节奏都精确)(见下文) |
4444
| `compression-algorithm` | ❌ | `Greedy` | 轨迹压缩算法:`Greedy`(快)、`DP`(体积最小)、`RDP`(最快),差异见下文 |
45-
| `max-simulation-time` | ❌ | - | 最大模拟时间(秒),按播放时长计(模拟时间 = 该值 × `speed`)。到时即返回已模拟的轨迹,不再等待所有方块静止;留空则模拟至全部静止 |
45+
| `max-simulation-time` | ❌ | - | 动画最长播放时长(秒)。到时动画即止,方块停在当前位置,不再等待全部落定;留空则播放至全部静止 |
4646
| `shape` | ❌ | `circle` | 贡献方块的形状(`circle` 或 `square`) |
4747
| `friction` | ❌ | `0.3` | 贡献方块的摩擦系数 |
48-
| `restitution` | ❌ | `0` | 贡献方块的弹性(碰撞恢复系数),远离 0 的值可能把方块弹出画面,掉出画面底部的方块会被移除 |
48+
| `restitution` | ❌ | `0` | 贡献方块的弹性(碰撞恢复系数),远离 0 的值可能把方块弹出画面 |
4949
| `text-top` | ❌ | `50` | 文字距离世界顶部的距离,控制文字垂直位置 |
5050
| `background-color` | ❌ | `transparent` | SVG 背景颜色(CSS 颜色值) |
5151
| `text-color` | ❌ | `black` | 碰撞文字颜色(CSS 颜色值) |
52-
| `scale` | ❌ | `3` | 显示缩放:SVG 的 `width`/`height` 为物理尺寸 × 缩放值,viewBox 保持原始物理尺寸 |
53-
| `speed` | ❌ | `3` | 播放倍速:动画时长 = 模拟时间 ÷ 倍速 |
52+
| `scale` | ❌ | `3` | 最终 SVG 的整体缩放,不影响物理世界的实际大小 |
53+
| `speed` | ❌ | `3` | 动画播放倍速,数值越大播放越快 |
5454
| `css` | ❌ | `false` | 启用 CSS 动画引擎替代 SMIL `animateTransform`,见下文 |
5555
| `animation` | ❌ | `var(--n) var(--dur) linear both` | 自定义 CSS `animation` 值(仅 `css: true` 时有效)。⚠️ 谨慎修改,可能破坏动画效果 |
5656
| `width` | ❌ | `300` | 物理世界宽度。⚠️ 会影响布局与 SVG 尺寸 |
@@ -61,7 +61,7 @@
6161

6262
### 减小文件体积
6363

64-
轨迹默认开启压缩:`compression-tolerance`(默认 `0.5`)会把轨迹点合并为关键帧,保证播放时
64+
轨迹默认开启压缩:`compression-tolerance` 会把轨迹点合并为关键帧,保证播放时
6565
每个原始时刻的插值位置与真实位置的偏差(SVG 像素)不超过阈值——碰撞、落地、停顿等速度
6666
变化按真实节奏保留。
6767

@@ -86,15 +86,13 @@
8686
提供两种输出引擎;两者都输出单个静态 SVG 文件,播放轨迹与节奏完全一致:
8787

8888
- **SMIL**(默认):每个方块由 `<animateTransform>` 元素驱动。
89-
- **CSS**(`css: true`):不再输出 animate 元素,所有动画声明收敛进单个自包含的
90-
`<style>` 块,每个方块的轨迹生成一条 `@keyframes` 规则。
89+
- **CSS**(`css: true`):每个方块由一条 CSS `animation` 声明驱动。
9190

9291
渲染出的动画完全一致。当目标环境对 SMIL 支持不佳时选 CSS——部分 sanitizer 会剥除
9392
SMIL 动画元素,而 SVG 内的 CSS 动画支持面更广(GitHub README 以 `<img>` 加载 SVG,
9493
两种引擎都能正常播放)。文件体积略大于 SMIL。
9594

96-
`css: true` 时,`animation` 输入可替换作用在每个方块上的 animation 声明,默认
97-
`var(--n) var(--dur) linear both`。可用变量:
95+
`css: true` 时,`animation` 输入可替换作用在每个方块上的 animation 声明。可用变量:
9896

9997
- `--n`:方块绑定的关键帧名,必须包含
10098
- `--dur`:播放时长
@@ -107,14 +105,13 @@ web preview 里验证。值中不能包含花括号、分号或 `]]>`。
107105
`width`、`height`、`size`、`interval` 改动的是物理世界本身,而不只是输出尺寸。贡献方块按
108106
`size` 和 `interval` 排布,文字以 `width` 居中,下落高度由 `height` 决定——请成套调整并核对
109107
效果,不要只改其中一个。若调整后模拟无法收敛(Action 直接报错),可设置 `max-simulation-time`
110-
限制模拟时长,仍能拿到该时刻为止的轨迹。
108+
限制动画播放时长,仍能正常生成 SVG。
111109

112110
`font-path` 用于替换碰撞字体,可以给本地 `.ttf`/`.otf` 路径,也可以直接给 `http(s)` 链接。
113111
默认使用内置的 Liberation Serif Bold,因为它轮廓规整、分解结果稳定。自定义字体不保证可用:
114112

115113
- 轮廓不规整(未闭合、自相交等)的字体,碰撞体的分解结果可能不可靠、形状异常。
116114
- 部分字体根本无法被 opentype.js 解析(例如很常见的 DejaVu 系列,会因 GSUB 表解析失败)。
117-
- 字体度量不同,通常需要重新调整 `font-size` 和 `text-top`。
118115

119116
### 输出
120117

‎action.yml‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,25 @@ inputs:
2727
animation, the interpolated position stays within this distance of the real one,
2828
which shrinks the SVG at the cost of a small visual approximation. 0 keeps the
2929
trajectory lossless in both position and timing (only uniform straight segments
30-
and pauses are compressed); the default fits most cases.
30+
and pauses are compressed).
3131
required: false
3232
default: '0.5'
3333
compression-algorithm:
3434
description: >-
35-
Trajectory compression algorithm: Greedy (default) is fast with near-optimal
35+
Trajectory compression algorithm: Greedy is fast with near-optimal
3636
results; DP finds the globally fewest keyframes (smallest SVG) but can take
3737
seconds on long trajectories; RDP is the fastest with somewhat more keyframes.
3838
All algorithms preserve speed and timing — bounces and stops stay keyframes.
3939
required: false
4040
default: Greedy
4141
max-simulation-time:
4242
description: >-
43-
Maximum simulation time in seconds, counted as animation playback duration:
44-
the simulated time is this value multiplied by the playback speed. When reached,
45-
the simulation stops and the trajectory simulated so far is returned instead of
46-
waiting for every block to settle. Leave empty to simulate until all blocks rest.
43+
Maximum animation playback duration in seconds. Once the animation reaches
44+
it, blocks freeze where they are instead of waiting for every block to
45+
settle. Leave empty to play until all blocks rest.
4746
required: false
4847
shape:
49-
description: Shape of the contribution blocks (circle or square). Circle has smoother physics and less likely to clip through obstacles.
48+
description: Shape of the contribution blocks (circle or square).
5049
required: false
5150
default: circle
5251
text-top:
@@ -63,22 +62,22 @@ inputs:
6362
default: black
6463
scale:
6564
description: >-
66-
Display zoom factor: the SVG width and height attributes are the physics
67-
dimensions multiplied by it, while the viewBox keeps the raw physics size.
65+
Overall zoom applied to the final SVG. It does not change the actual
66+
size of the physics world.
6867
required: false
6968
default: '3'
7069
speed:
7170
description: >-
72-
Playback speed multiplier: the animation duration is the simulated time
73-
divided by it.
71+
Playback speed multiplier: the higher the value, the faster the
72+
animation plays.
7473
required: false
7574
default: '3'
7675
css:
7776
description: >-
78-
Use the CSS animation engine (a self-contained style block with @keyframes,
79-
animations bound via data-date selectors) instead of SMIL animateTransform.
77+
Render the animation with CSS animation (the only engine the animation
78+
input works with) instead of SMIL animateTransform.
8079
Both stay a single static SVG file; CSS plays more reliably in environments
81-
with poor SMIL support, and stays visually identical. Default: false.
80+
with poor SMIL support, and stays visually identical.
8281
required: false
8382
default: 'false'
8483
animation:
@@ -103,14 +102,14 @@ inputs:
103102
default: '150'
104103
size:
105104
description: >-
106-
Side length of each contribution block. Change with caution: larger blocks are more
107-
likely to squeeze against each other or clip through the text.
105+
Side length of each contribution block. Change with caution: too large
106+
pushes the block matrix out of the world bounds.
108107
required: false
109108
default: '4'
110109
interval:
111110
description: >-
112-
Spacing between contribution blocks. Change with caution: too small makes blocks overlap,
113-
too large pushes them out of the world bounds.
111+
Spacing between contribution blocks. Change with caution: too large
112+
pushes the block matrix out of the world bounds.
114113
required: false
115114
default: '1.5'
116115
friction:
@@ -120,18 +119,16 @@ inputs:
120119
default: '0.3'
121120
restitution:
122121
description: >-
123-
Restitution (bounciness) of the contribution blocks. Values far from 0 may fling
124-
blocks out of the visible area; such blocks are removed once they fall below the
125-
world bottom.
122+
Restitution (bounciness) of the contribution blocks. Values far from 0
123+
may fling blocks out of the visible area.
126124
required: false
127125
default: '0'
128126
font-path:
129127
description: >-
130128
Path to a custom font (.ttf/.otf), relative to the repository root, or an http(s) URL.
131129
Defaults to the bundled Liberation Serif Bold. Use with caution: some fonts contain open
132130
or self-intersecting contours that the triangulation algorithm rejects, and some cannot
133-
be parsed by opentype.js at all; different font metrics may also require re-tuning
134-
font-size and text-top.
131+
be parsed by opentype.js at all.
135132
required: false
136133

137134
outputs:

0 commit comments

Comments
 (0)