用值、关键时间、关键样条和计算模式控制 SVG 动画

2023-09-03 12:36:04

在前面的文章中，我们探索了 SVG 动画的基本概念、时间控制和路径动画。现在，让我们深入了解控制动画值的更高级方法，包括值、关键时间、关键样条和计算模式。

动画值

动画值指定动画中应用于目标属性的实际值。它可以是固定值、函数或其他属性的值。对于元素，from 和 to 属性用于指定动画的开始和结束值，而 values 属性允许指定多个值，创建更复杂的动画。

<animate attributeName="fill" from="red" to="blue" values="green; yellow" />

关键时间

关键时间指定动画中特定值的发生时间。它们是一个百分比列表，范围从 0 到 100，其中 0 表示动画开始，100 表示动画结束。通过将值与关键时间配对，可以创建分段动画，在不同的时间点应用不同的值。

<animate attributeName="fill" from="red" to="blue" values="green; yellow" keyTimes="0; 0.5; 1" />

关键样条

关键样条定义动画值的运动方式。它是一个列表，指定每个关键时间点的贝塞尔曲线控制点。控制点决定了值之间的过渡速度和曲线度。

<animate attributeName="fill" from="red" to="blue" values="green; yellow" keyTimes="0; 0.5; 1" keySplines="0.1, 0.5, 0.2, 1; 0.5, 1, 0.8, 0.2" />

计算模式

计算模式指定如何计算动画值。有两种计算模式：

离散 (discrete) ：值在关键时间之间保持恒定。
平滑 (paced) ：值在关键时间之间平滑过渡。

默认计算模式为离散。平滑模式通过插值在关键时间之间创建中间值，产生更流畅的动画。

<animate attributeName="fill" from="red" to="blue" values="green; yellow" keyTimes="0; 0.5; 1" calcMode="paced" />

示例

让我们创建一个动画，使圆形从红色平滑过渡到蓝色，然后又过渡回红色：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red">
    <animate attributeName="fill" from="red" to="blue" to="red" values="green; yellow" keyTimes="0; 0.5; 1" keySplines="0.1, 0.5, 0.2, 1; 0.5, 1, 0.8, 0.2" calcMode="paced" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>