SVG 动画基础 (横向动态排序柱状图为例)

1 背景

需要为 svg 添加动画，展现横向动态排序柱状图效果

• 源 SVG
  

<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	<rect x="9" y="6" width="30" height="8" fill="#ec7e0f"></rect>
	<rect x="9" y="18" width="50" height="8" fill="#ec7e0f"></rect>
	<rect x="9" y="30" width="40" height="8" fill="#ec7e0f"></rect>
	<rect x="9" y="42" width="20" height="8" fill="#ec7e0f"></rect>
	<rect x="4" y="3" width="2" height="50" fill="#2990da"></rect>
</svg>

• 添加动画后（不能展示svg格式动图，复制代码在浏览器中查看）

<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	    <rect x="9" y="6" width="30" height="8" fill="#ec7e0f">
        <animate attributeName="y" attributeType="XML" values="6;18" id="animate8" dur="0.5s" begin="0s;animate4.end+3s"
            fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="18;30;42" id="animate9" begin="1.5s;animate2.end"
            dur="1s" fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="42;6" id="animate10" keyTimes="0;1"
            begin="animate4.end+1s" dur="0.5s" fill="freeze" />
    </rect>
    <rect x="9" y="18" width="50" height="8" fill="#ec7e0f">
        <animate attributeName="y" attributeType="XML" values="18;6" id="animate11" dur="0.5s"
            begin="0s;animate4.end+3s" fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="6;18" id="animate12" dur="0.5s" begin="2s;animate4.end"
            fill="freeze" />
    </rect>
    <rect x="9" y="30" width="40" height="8" fill="#ec7e0f">
        <animate attributeName="y" attributeType="XML" values="30;42" begin="1s;animate1.end" id="animate9" dur="0.5s"
            fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="42;30" begin="2s;animate4.end" id="animate10" dur="0.5s"
            fill="freeze" />
    </rect>
    <rect x="9" y="42" width="20" height="8" fill="#ec7e0f">
        <animate attributeName="width" attributeType="XML" values="20;40" id="animate1" keyTimes="0;1"
            begin="0s;animate4.end+3s" dur="1s" fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="42;30" id="animate2" begin="1s;animate1.end" dur="0.5s"
            fill="freeze" />
        <animate attributeName="width" attributeType="XML" values="40;55" id="animate3" keyTimes="0;1"
            begin="1.5s;animate2.end" dur="1s" fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="30;18" id="animate4" begin="1.5s;animate2.end" dur="0.5s"
            fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="18;6" id="animate5" begin="2s;animate4.end" dur="0.5s"
            fill="freeze" />
        <animate attributeName="width" attributeType="XML" values="55;20" id="animate6" keyTimes="0;1"
            begin="animate4.end+1s" dur="0.5s" fill="freeze" />
        <animate attributeName="y" attributeType="XML" values="6;42" id="animate7" keyTimes="0;1"
            begin="animate4.end+1s" dur="0.5s" fill="freeze" />
    </rect>
    <rect x="4" y="3" width="2" height="50" fill="#2990da"></rect>
</svg>

2 动画引用方式

2.1 xlink:href

   <svg width="200" height="200">
    <circle id="myCircle" cx="100" cy="100" r="50" fill="red"></circle>
    <animate attributeName="r" from="50" to="100" dur="5s" xlink:href="#myCircle"></animate>
</svg>

2.2 svg 元素内

   <svg width="200" height="200">
    <circle id="myCircle" cx="100" cy="100" r="50" fill="red">
	 <animate attributeName="r" from="50" to="100" dur="5s" fill="freeze"></animate>
	</circle>
</svg>

3 分类

3.1 基础动画 animate

<svg width="200" height="200">
    <circle id="myCircle" cx="100" cy="100" r="50" fill="red"></circle>
    <animate attributeName="r" from="50" to="100" dur="2s" xlink:href="#myCircle"></animate>
    <animate attributeName="fill" from="red" to="yellow" dur="2s" xlink:href="#myCircle"></animate>
</svg>

3.2 形变动画 animateTransform

• attributeName 属性的值永远是 transform
• type 属性指定形变类型（平移 translate、缩放 transform、旋转 rotate）

3.2.1 平移

<svg width="400" height="400">
    <rect x="100" y="100" width="200" height="200" fill="red">
        <animateTransform
               attributeName="transform"
               type="rotate"
               from="0 100 100"
               to="45 100 100"
               dur="2s"
               begin="1s"
               fill="freeze"
      		 ></animateTransform>

    </rect>
</svg>

3.2.2 旋转

<svg width="500" height="500">
    <rect x="100" y="100" width="200" height="200" fill="red">
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="45 100 100" dur="2s" begin="1s"
            fill="freeze"></animateTransform>
    </rect>
</svg>

3.2.2 缩放

<svg width="500" height="500">
    <rect x="100" y="100" width="200" height="200" fill="red">
        <animateTransform attributeName="transform" type="scale" from="1 1" to="0.5 1" dur="2s" begin="1s"
            fill="freeze"></animateTransform>
    </rect>
</svg>

3.3 路径动画 animateMotion

让某一元素沿着某一路径运动

• path 属性：指定元素按照哪一路径执行。path 中的 M 起点是相对于矩形位置的。
• rotate=“auto”:是动画沿着路径自动旋转

<svg width="500" height="500" viewBox="-100 -100 500 500">
    <path d="M 0 0 C 0 300 300 300 300 0" stroke="blue" stroke-width="5" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="red">
        <animateMotion path="M 0 0 C 0 300 300 300 300 0" dur="5s" begin="1s" fill="freeze" rotate="auto">
        </animateMotion>
    </rect>
</svg>

4 属性

属性名	含义	取值	默认值
attributeType	CSS/XML 规定的属性值的名称空间
attributeName	元素产生动画效果的属性会
from	起始属性值
to	结束属性值
max	指定动画持续时间的最大值	max=“2s”
min	指定动画持续时间的最小值	min=“2s”
by	为动画过程中修改的属性指定相对偏移值	by=“50”
dur	动画时长	clock-value 或者 indefinite(无限) 必须大于 0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：hh:mm:ss.iii 或者这样：mm:ss.iii	indefinite
fill	动画结束之后的状态	freeze 保持结束状态 remove 恢复初始状态（默认值）	remove
repeatCount	动画重复执行次数	number 或 indefinite(无限)
repeatDur	动画重复执行总时间	clock-value 或 indefinite(无限)
begin	规定动画开始的时间或触发时机	begin-value-list 以下值组成的列表(以;分隔) offset-value 相对时间 begin=“0.5s” 0.5 秒后开始 begin=“1s;2s” 1 秒后和 2 秒后开始 syncbase-value 相对于另一个动画的开头或结束的时间偏移 begin=“a1.start + 1s” 一个 id 为 a1 的动画元素开始后 1s 再执行动画 begin=“a1.end” 一个 id 为 a1 的动画元素结束后 1s 再执行动画 event-value 事件触发 包括这些：focusin、focusout、activate、click、mousedown、mouseup、mouseover、mousemove、mouseout、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsertedIntoDocument、DOMAttrModified、DOMCharacterDataModified、SVGLoad、SVGUnload、SVGAbort、SVGError、SVGResize、SVGScroll、SVGZoom、beginEvent、endEvent 和 repeatEvent。 begin=“a1.click +1s” 一个 id 为 a1 的 svg 元素(比如 rect)点击后 1s 再执行动画 begin=“a1.focusin” 一个 id 为 a1 的 svg 元素 focus 时执行动画 repeat-value repeat 描述了一个符合条件重复事件，事件发生了指定次数的时间点 begin=“myLoop.repeat(2)” 第二次重复时触发（一般 animation 设置 repeatCount=“3” id=“myLoop” ） accessKey-value 快捷键触发 begin=“accessKey(s)” 按下 s 键时触发 wallclock-sync-value 描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法 begin=“1s;a1.end” 在 1s 和 a1 动画结束时都触发
end	结束时间	end-value-list 同 begin
restart	规定元素开始动画之后，是否可以被重新开始执行	always：动画可以在任何时候被重置。 whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后，才能再执行。 never：在整个 SVG 执行的过程中，元素动画不能被重置。	always
calcMode	规定每一个动画片段的动画表现	linear：默认属性值, 匀速动画 discrete: 非连续动画, 没有动画效果瞬间完成, paced: 规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效 spline: 配合 ketTimes,keySplines 属性来定义各个动画过渡效, 自定义动画	linear
keyTimes	用于控制动画的执行步骤,划分动画时间片段, 取值 0-1	以分号分隔的时间值列表，列表中的每个值与 values 中的值一一对应，定义了 values 中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 [0-1] 之间的浮点数，表示动画的完成时间。 如果指定了 keyTimes 列表，那么一定有与之完全对应的 values 列表。 keyTimes 列表的语义取决于插值模式： 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。 如果插值模式是 paced（踏步），keyTimes 属性被忽略。 如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。 keyTimes=“0 ; 0.25 ; 0.5 ; 0.75 ; 1”
keySplines	定义了一组与 keyTimes 列表关联的 Bézier 曲线控制点，定义了一个控制间隔起搏的三次 Bézier 函数	除非 calcMode 属性设置为 spline，否则会忽略此属性。如果关键点样条线规范中存在任何错误（错误的值、过多或过少的值），动画将不会发生。
values	定义在动画过程中使用的值序列，划分对应取值片段的值	如果指定了此属性，则将忽略在元素上设置的任何 from, to, 和 by 属性值
additive	控制动画是否为 additive。将动画定义为属性值的偏移或增量（而不是绝对值）	replace:指定动画将覆盖属性的基础值和其他优先级较低的动画 sum:指定动画将添加到属性的基础值和其他优先级较低的动画中 值	replace
accumulate	控制了动画是否是累加的,在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。	sum:指定第一次循环后的每次循环建立在上次循环的终值上 none:指定重复循环是不累加的	none