最近做了一個相對“反工程化”的前端小項目:
一組新年倒計時實驗,全部使用原生前端技術完成。
技術選型刻意保持簡單:
- 原生 JavaScript
- HTML5 Canvas
- requestAnimationFrame 驅動動畫
- Web Audio API 處理音效
沒有使用任何主流框架,也沒有複雜的構建流程。
這樣做的原因是:
倒計時本身是一個 極短時長、高情緒密度 的交互場景,並不適合重工程結構,反而更需要:
- 精準時間控制
- 可預期的動畫節奏
- 音畫同步
倉庫中包含多個並列實現版本,每個版本都關注不同側重點(節奏、結構、粒子、表現力)。
作為工程實踐,它更適合用來:
- 學習 Canvas 動畫
- 理解時間驅動而非狀態驅動的 UI
- 做活動頁 / 節日頁的參考實現
項目已開源(MIT License):
👉 https://github.com/FlameAIStudio/NewYearCountdown