✨Effect Lab
Read the full guide完整技术长文 One force, six pictures一个力,六张画面
💥

Shockwave 爆炸涟漪

A click pushes every particle outward, and the strength depends only on how close it was to the impact. 一次点击把每个粒子往外推,推力只取决于它离爆炸点多远。

Canvas 2DRadial impulseDistance falloff
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

For each particle the code computes the distance to the click, then applies an impulse of max(0, 200-d) * 0.15 along the normalised direction. Beyond 200px the impulse is exactly zero, which is why the wave has a visible edge instead of nudging the entire canvas. A 0.96 damping factor brings everything back to rest. 对每个粒子算到点击位置的距离,再沿单位方向施加 max(0, 200-d) * 0.15 的冲量。超过 200px 冲量精确为 0,所以波有明显的边界,而不是整块画布一起抖。0.96 的阻尼会把一切慢慢拉回静止。

What to change可以改的地方

  • 1Increase 200 to 400 for a shockwave that covers the whole stage.
  • 2Add a brief screen shake on click to sell the impact.
  • 1把 200 改成 400,冲击波就能覆盖整个舞台。
  • 2点击时叠一下屏幕震动,打击感会强很多。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

shockwave.html