【緊急筆記】svg動畫calcMode

by

calcMode="linear" calcMode="paced" calcMode="discrete" calcMode="spline"

以上這個動畫的代碼為：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- linear: 前慢後快 -->
  <rect x="0" y="20" width="50" height="50" fill="red">
    <animate id="learnsvgcalcmode" begin="0s;learnsvgcalcmode.end+2s" attributeName="x" values="0;100;300;300" keyTimes="0;0.24;0.72;1" dur="5s" fill="freeze" calcMode="linear"/>
  </rect>
  <text x="10" y="15" font-size="12">calcMode="linear"</text>

  <!-- paced: 恆定速度 -->
  <rect x="0" y="90" width="50" height="50" fill="green">
    <animate begin="0s;learnsvgcalcmode.end+2s" attributeName="x" values="0;100;300;300" keyTimes="0;0.24;0.72;1" dur="5s" fill="freeze" calcMode="paced"/>
  </rect>
  <text x="10" y="85" font-size="12">calcMode="paced"</text>

  <!-- discrete: 跳躍式 -->
  <rect x="0" y="160" width="50" height="50" fill="blue">
    <animate begin="0s;learnsvgcalcmode.end+2s" attributeName="x" values="0;100;200;300;300" keyTimes="0;0.24;0.48;0.72;1" dur="5s" fill="freeze" calcMode="discrete"/>
  </rect>
  <text x="10" y="155" font-size="12">calcMode="discrete"</text>

  <!-- spline: 平滑曲線 (keySplines 定義兩個區段的貝塞爾曲線，緩入緩出) -->
  <rect x="0" y="230" width="50" height="50" fill="purple">
    <animate begin="0s;learnsvgcalcmode.end+2s" attributeName="x" values="0;300" keyTimes="0;1" dur="5s" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1"/>
  </rect>
  <text x="10" y="225" font-size="12">calcMode="spline"</text>
</svg>

對比

  • calcMode="discrete"會在時間結束之時到達
  • calcMode="linear"是默認值
  • calcMode="paced"不會去管KeyTimes（animateMotion的默認值）
  • calcMode="spline"必須指定KeyTimes和KeySplines

discrete跟set的不同

discrete跟<set/>的不同在於，<set/>是時間開始時就設置，同時set還可以設置如class等任何屬性。例如：

<set id="set1" attributeName="fill" to="red" begin="3s" dur="2s"></set>
<set id="set2" attributeName="fill" to="blue" begin="set1.end" dur="2s"></set>
<set id="set3" attributeName="stroke-width" to="7" begin="set1.begin" dur="2s"></set>

參見

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/calcMode

順帶了解下accumulate和additive的區別

以下內容來自grok：

Pages: 1 2

Leave a Comment