跳轉到

D-20260816-06｜賽內倒數採主題 WebP 動畫

背景與驅動力

賽內 3、2、1、GO 原以通用 DOM 文字呈現，無法讓網站主題完整控制造型與動態。若把粒子、 速度與光影拆成共用 CSS，會把美術風格重新耦合到程式碼；若讓動畫載入或播放完成成為起跑 條件，則會破壞既有 GO 權威與 race-ready 邊界。

考慮過的選項

  • 維持 DOM 文字並增加共用 CSS 動畫：體積小，但主題風格仍受共用程式限制。
  • 由各主題提供一次性 animated WebP 與靜態 fallback：可讓視覺完整自包含，代價是增加主題資產與驗證成本，採納。
  • 讓動畫完成後才啟動模擬：畫面時序表面一致，但網路或解碼失敗會改變正式起跑，拒絕。

決定

賽內 3、2、1 與無語系起跑效果改由網站主題的 WebP 資產呈現；數字沿用圖檔禁字決策的 0–9 例外，起跑效果不得烘入 GO 或其他文字。動畫、粒子與光影全部留在資產，runtime 只負責 共用版面、事件掛載、無障礙語意與降級。secondsLeft === 0、frame pump 及 GO 前 race-ready 權威維持不變，圖片永遠不是起跑條件；有效降動效改用靜態資產。

後果與影響

每個正式主題需維護同一組動態與靜態槽，default 作完整 fallback；新增主題只需依契約供檔， 不需新增主題 id 分支或 CSS 動畫 profile。初始 default 與月兔主題需同時交付可重製原圖、逐幀 工程及 runtime WebP。現行完整槽位、時長、容量、降級與無障礙規則見 主題系統，呈現接線見 themes。