SVG 動畫中 additive 和 accumulate 的用法
在 SVG 的動畫元素（如 additive 和 accumulate 是兩個重要的屬性，用來控制動畫的疊加和累積行為。它們基於 SMIL (Synchronized Multimedia Integration Language) 規範，允許更複雜的動畫效果。以下分別說明它們的用法、可能的值，以及透過例子來突顯區別。
additive 屬性
- 定義與用法：
additive控制動畫是否「加成」（additive），即動畫值如何與目標屬性的基礎值（underlying value）或其他較低優先級的動畫疊加。它常用於定義動畫作為「偏移量」（offset）或「增量」（delta），而不是絕對值。當有多個動畫同時作用於同一屬性時，additive決定它們的組合方式。 - 可能的值：
replace（預設值）：動畫會完全替換目標屬性的基礎值，以及其他較低優先級的動畫。適合簡單的絕對動畫。sum：動畫會「加到」基礎值或其他較低優先級的動畫上，作為增量應用。適合疊加效果，如多層動畫或相對變化。
- 注意事項：這個屬性不受動畫影響（not animatable）。它的行為也受
from、to和by屬性的影響（例如，使用by時更容易實現增量）。如果目標屬性不支持加法（如顏色），則忽略。
accumulate 屬性
- 定義與用法：
accumulate控制動畫是否「累積」（cumulative），主要用於重複動畫（當repeatCount> 1 或repeatDur指定時）。它決定每個重複迭代是否建構在先前迭代的結果上。如果動畫不重複，或目標屬性不支持加法，則忽略此屬性。 - 可能的值：
none（預設值）：每個重複迭代不累積，直接從初始值重新開始。不建構在先前結果上。sum：每個重複迭代（從第二次開始）會「加到」先前迭代的最終值上，累積效果。適合漸進式變化，如持續增長或移動。
- 注意事項：僅在動畫重複時有效。如果只用
to屬性定義動畫，則忽略。也不受動畫影響。
additive 和 accumulate 的區別
- 核心差異：
additive關注於「單次動畫執行」中，動畫值如何與基礎值或其他同時運行的動畫疊加（replace 或 sum）。它處理「並行」或「層級」疊加，適合多動畫組合或相對變化。accumulate關注於「重複動畫」中，每個迭代是否累積先前結果（none 或 sum）。它處理「序列」累積，只在重複時生效，適合建構式效果。
- 互動：兩個屬性可以結合使用。例如，在重複動畫中使用
additive="sum"和accumulate="sum"，可以實現累積偏移。但如果沒有重複，accumulate無效；如果沒有多動畫或基礎值需求，additive可能保持預設。 - 適用場景：
additive：用於複合動畫，如一個元素同時縮放和旋轉，需要疊加。accumulate：用於循環動畫，如一個方塊每次重複都多移動一點距離，形成累積路徑。
- 忽略情況：如果屬性不支持加法（如字串），兩個屬性都會被忽略。
例子說明
以下提供 SVG 代碼例子，使用一個正方形（x 屬性（從 0 移動到 100），並設定 dur="2s"（持續 2 秒）、repeatCount="3"（重複 3 次）。將代碼複製到 .svg 檔案或在線工具中查看效果。
1. additive 的例子
- 使用
additive="replace"（預設）：動畫替換基礎值。 - 使用
additive="sum"：動畫加到基礎值上（這裡基礎 x=50，所以動畫作為偏移）。
- 觀察：紅色方塊從 0 開始移動；藍色方塊從 50 開始，動畫作為 +0 到 +100 的偏移。重複時兩個都重新開始（因為 accumulate 預設 none）。
2. accumulate 的例子
- 使用
accumulate="none"（預設）：每個重複不累積，從頭開始。 - 使用
accumulate="sum"：每個重複累積先前結果（第一次 0→100，第二次 100→200，第三次 200→300）。
- 觀察：紅色方塊每次重複都回到 0→100；藍色方塊累積，總移動到 300（3 次 x 100）。
3. 結合 additive 和 accumulate 的例子
這裡使用 additive="sum"（偏移基礎值）和 accumulate="sum"（累積重複），示範複合效果。
- 觀察：從 50 開始，第一次 +50（到 100），第二次 +50（到 150），第三次 +50（到 200）。這展示了 additive 的偏移與 accumulate 的累積結合。
這些例子可以幫助你理解差異。如果你需要更多自訂例子或在特定瀏覽器測試，請提供細節！
Pages: 1 2