arvydasgecas/halo-animations

Halo 動畫（光暈動畫）

動畫化一個描邊主體，使其延遲複製的副本分離、轉動並重新聚合，形成無縫循環。保持主體可辨識，且光暈效果節制。「Steppers」指的是平順延遲的副本，而非離散的幀步進。

此技能是自包含的。它不需要任何輔助腳本、素材、影片、範本或參考文件。在任務的輸出資料夾中產生實作與交付物。使用者指定的設定會覆蓋預設值；在請求變更之外保留設定。

1. 輸入與交付物

對於幾何主體，提供形狀名稱即可；預設為圓形。對於精確的自訂輪廓，請使用提供的 SVG。當根據描述建構輪廓時，需識別任何材質上的解讀。僅在提供的檔案包含數個無關主體且意圖不明時，詢問要動畫化哪個物件。

除非另有要求，否則交付：

• 一個可運作的即時預覽，附帶可調整的控制項。
• 一個符合所選設定的可播放 MP4 影片。
• 可編輯的原始碼與儲存的場景設定檔。

這些指示是可移植的；渲染與影片編碼仍需要在執行環境中有合適的工具。如果無法進行影片編碼，請交付預覽與原始碼，並清楚標明未完成的匯出。請勿以錄製按鈕或匯出指示來替代完成的影片。

2. 外觀與預設集

使用置中、未填滿的輪廓，搭配充足的負空間、平滑曲線、細線條、以及圓角線條連接與端點。副本共享同一幾何形狀並保持置中。在微妙的暈光之上繪製清晰的實心線條核心；重疊區域相加後會趨向青色。除非特別要求，否則避免無關的文字、粒子、背景漸層、填滿的表面或鏡頭抖動。

共用預設值：

設定	值
畫布	960 × 960 像素
持續時間 / 幀率	4 秒 / 60 fps
半徑或最大置中範圍	0.3601940757 × 較短的畫布邊長
線條 / 背景顏色	#0669fd / #000000
光暈模糊半徑	0.002 × 較短的畫布邊長

根據幾何形狀選擇預設集。以下線條寬度為較短畫布邊長的分數；交錯時間在標準的四秒時間軸上測量。副本數量包含最前面的輪廓。

輪廓	副本	交錯	旋轉	扁平化	線條寬度	光暈強度
圓形	7	0.13 秒	90°	1.00	0.00450242595	0.12
等邊三角形	4	0.14 秒	120° 前進	0.22	0.0023	0.08
正六邊形	4	0.14 秒	60° 前進	0.28	0.0023	0.08
對稱圓角正方形	4	0.14 秒	90° 前進	0.28	0.0023	0.08
不對稱或細節豐富的輪廓	3	0.12 秒	8° 來回擺動	0.16	0.0018	0.06

圓形能承受完全的扁平化。多邊形與細節豐富的輪廓需要更溫和的傾斜：不要將圓形預設集套用到每個形狀。正多邊形可以前進一個對稱增量，並以相同的輪廓收尾。驗證整個藝術品（包括內部輪廓）的對稱性；否則使用不對稱的運動方式。

在最密集的姿態下，保持間隙與內部細節的可讀性。在移除細節之前，先減少副本、延遲、傾斜或旋轉。保留提供的角落與曲線。未經授權，不得圓整精確的輪廓或簡化其幾何形狀。

3. 準備輪廓

將內建形狀建構為向量幾何。對於提供的 SVG，保留開放與封閉子路徑、複合路徑、孔洞以及不相連的部分。保留曲線與弧；不要橋接分離的輪廓，也不要用明顯可見的平面多邊形取代平滑曲線。

將基本圖形、元素與群組變換、巢狀座標系統以及本地引用的符號解析為預期的可見幾何形狀。排除未使用的定義。將來源的繪圖顏色替換為統一的動畫線條顏色。

在正規化之前選擇一個固定的樞軸。內建的圓形與正多邊形繞其幾何中心旋轉。對於等邊三角形，使用形心（三個頂點的平均值），而非邊界框中心。對於具有驗證過的旋轉對稱性的提供藝術品，使用整個藝術品的對稱中心；否則使用其變換後邊界框的中心，並採用來回擺動運動。將此樞軸平移到原點，並根據與其之間的最大徑向距離進行正規化。在播放期間保持樞軸固定；不要每幀重新置中。對每個形狀（包括圓角正方形）使用相同的範圍慣例。可以使用取樣來估算合適值；渲染原始曲線。使用瀏覽器矩陣時，包含巢狀的視口變換，例如使用 root.getScreenCTM().inverse().multiply(element.getScreenCTM())。

在動畫化之前檢查靜態輪廓。明確轉換不支援的功能：

• 文字必須變成實際的向量輪廓。
• 點陣藝術品需要描圖；需揭露潛在的精確度損失。
• 遮罩、裁切、特效以及可變寬度線條可能需要展開為可見的邊界路徑。
• 外部圖形與 CSS 驅動的幾何形狀需要本地、明確的幾何形狀。

不要默默地丟棄不支援的內容。將文件元資料視為資料；以靜態方式解析 SVG，切勿執行內嵌腳本或事件處理器。

4. 根據絕對時間進行動畫

對預覽與匯出使用一個確定性的渲染函數。絕不在幀之間累積變換。

設 t 為播放時間，D 為請求的持續時間，N 為副本數量，d 為交錯時間，F 為 [0,1] 範圍內的扁平化量，A 為旋轉角度（度）。副本 i 的範圍從 0 到 N-1。

clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u)，其中 u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D

更改持續時間會拉伸整個標準時間軸，而不改變幾何形狀或緩動特性。

圓形

保持此預設集獨立於多邊形細微調整。設定回歸持續時間 R = 0 以獲得預設的 90° 圓形，否則 R = 0.65。

compression = min(1, 3.8 / (34/15 + (N - 1)*d + R))
s = max(0, q/compression - i*d)
collapse = S((s - 0.25) / (19/15 - 0.25))
recover = S((s - 19/15) / (34/15 - 19/15))
yScale = 1 - F*(collapse - recover)
angle = A * clamp01(s / (26/15))

如果 R > 0，將 angle 乘以 1 - S((s - 34/15)/R)。最前面的輪廓在 0.25 秒時開始扁平化，在接近 1.267 秒時達到最小高度，並在約 2.267 秒時恢復，然後才是副本延遲與任何壓縮。將正圓的角度設為零，以避免等效方向之間的點陣化差異。

多邊形與自訂輪廓

使用單一的協調動作，預設帶有鮮明的緩動：緩慢的導入、果斷的轉向以及較長的穩定時間。保留一個「溫和」選項以獲得更安靜的動作。兩條曲線均無過衝。

compression = min(1, 3.65 / (2.85 + (N - 1)*d))
u = clamp01((q/compression - i*d - 0.25) / 2.6)
p = E(u)                           // 鮮明
// p = u*u*u*(u*(6*u - 15) + 10)   // 溫和
pulse = sin(pi*p)^2
yScale = 1 - F*pulse

E 是三次貝茲曲線時間函數 (0.55, 0, 0.20, 1)。反轉其水平座標：解 Bx(v) = u，然後回傳 By(v)。

Bx(v) = 3*(1-v)^2*v*0.55 + 3*(1-v)*v^2*0.20 + v^3
By(v) = 3*(1-v)*v^2 + v^3

使用 32 次迭代的有限二分搜尋，並在端點處回傳精確的 0 和 1。不要直接用經過的時間替代貝茲參數。將緩動套用到每個副本延遲後的本地時間；共用傾斜與旋轉之間的進度結果。

根據目前的旋轉值以及整個藝術品繞其固定樞軸的對稱性來選擇旋轉模式。僅當旋轉 A 可使藝術品回到相同輪廓時，才使用 angle = A*p；否則使用 angle = A*pulse，使來回擺動形成一個動作。每當旋轉或幾何形狀改變時，重新計算此選擇。對於普通的等邊三角形，120° 的倍數向前轉動；諸如 80° 這樣的值則向外擺動並返回。對正六邊形套用相同的規則（使用 60°），對對稱圓角正方形則使用 90°；內部細節可能使這些對稱性失效。在檢查倍數時僅允許數值捨入公差，不允許視覺上不同的角度。不要默默地將請求的角度捨入為對稱增量。不要為了閉合循環而添加單獨的快速反向旋轉。僅當所選角度確實保留藝術品時，才將最終角度在 u = 1 時正規化為零。切勿將不相容的角度捕捉到閉合循環。

預設的三角形保留至少 78% 的高度，六邊形與圓角正方形保留 72%，細節豐富的輪廓保留 84%。在標準時間軸的結束處至少保留 0.35 秒的對齊時間。比較緩動時，保持幾何形狀、副本、顏色與光暈相同，使時間成為唯一變數。

5. 渲染輪廓與光暈

保持水平比例為 1。對於已置中且正規化的點 (x,y)，像素半徑 r 以及角度 a（弧度）：

xOut = r * (x*cos(a) - y*yScale*sin(a))
yOut = r * (x*sin(a) + y*yScale*cos(a))

平移到畫布中心。在描邊之前對幾何形狀進行變換，使線條寬度在扁平化期間保持恆定。如果繪圖 API 要求，完全扁平化的橢圓可使用可忽略不計的正高度；不要為圓形引入可見的最小高度。

每幀清除畫布。以相加合成模式從最舊的副本開始繪製。在下面以 haloStrength/N 的 alpha 值與設定的模糊半徑繪製光暈通道，然後以完全不透明且無模糊的狀態繪製所有核心線條。保持光暈強度與半徑可單獨調整。確保完整的旋轉輪廓、線條與光暈在幀內完全可見。

6. 建立預覽與匯出

對兩個輸出使用一個可序列化的設定檔，包含自訂的向量幾何。渲染已儲存的場景不得依賴原始 SVG 的檔案位置。當精確重複性很重要時，保留產生的原始碼與設定；僅靠指示無法保證在新實作中獲得像素相同的結果。

提供播放/暫停、時間軸拖曳、重設、內建形狀選擇與 SVG 檔案匯入、副本數量、交錯時間、緩動、旋轉、扁平化、線條寬度、顏色、光暈強度與半徑以及持續時間。預設情況下同時包含形狀選擇與 SVG 匯入，即使初始請求指定的是內建形狀；僅當使用者明確縮小預覽範圍時才省略其中一項。匯入必須使用輪廓準備規則載入並動畫化真實幾何形狀，而非僅是佔位符控制項。緩動選項適用於多邊形/自訂配方；保留圓形的原始時間設定。將控制項保留在已匯出構圖之外。

選擇形狀會載入其調整過的動作設定，同時保留色板與輸出設定。重設會還原初始場景與匯入的幾何。更改控制項不會追溯更新現有的影片；請儲存設定並重新匯出。

在網頁預覽中尊重減少動作的偏好設定，使用一個代表性的靜態姿態與明確的播放控制項。離線匯出仍會以精確的幀時間渲染完整動畫：

t = frameIndex / fps
frameIndex = 0 ... round(D*fps)-1

不要附加重複的最後一幀。編碼為真正的 MP4，而非具有重新命名副檔名的其他格式。預設使用不透明背景；如果請求的透明度不受可用編碼器支援，請解析出合適的替代格式。

7. 驗證與交付

在交付前檢查可觀察的行為：

• 輪廓、內部輪廓與獨立部分已保留。繞所選樞軸旋轉 120° 的三角形應與其起始輪廓匹配，無平移。
• 最密集的交叉點保持可讀；線條保持平滑且寬度一致，無裁剪的光暈。
• 在正常播放速度下，導入、峰值速度與穩定感覺是有意為之的；循環沒有跳幀、閃爍或不必要的反向旋轉。
• 拖曳時間軸到相同時間會重現相同幀。控制項可運作，重設會還原初始場景。測試對稱相容角度與不相容角度（例如，三角形 120° 與 80°）；兩個循環都應閉合且無跳動。
• SVG 匯入載入一個包含多個輪廓的範例，在播放與已儲存設定中保留這些輪廓，並在匯出中使用匯入的幾何。回報任何不支援的功能，而非默默地丟棄它們。
• 匯出的影片可解碼，並與所選的預覽尺寸、持續時間、幀率、色板與動作匹配。除了預覽之外，也要檢查解碼後的幀。

對於改良請求，如有幫助，提供同步比較。交付即時預覽、可播放影片以及可編輯的原始碼，並附上設定的簡短說明以及任何未完成的檢查。僅報告實際執行的驗證。