学习 svg 笔记(一) SVG 动画

在前一篇学习 kityminder 中我们遇到到了动画, 为此先补充学习 svg 动画的知识, 以及相关的 kity 如何封装动画
到 kity.Animator 中的问题.

购买的图书 《SVG精髓》有一个良好的示例网站, 位于 github:
    https://github.com/oreillymedia/svg-essentials-examples

不幸的是有些例子 ie (即使到了 ie10) 看不了; 对于 ie 这种总是为前端拖后腿的浏览器, 我们只能报以吐槽.

 

== 动画基础 ==

SVG 动画特性基于 SMIL 规范(同步多媒体集成语言):
   http://www.w3.org/TR/SMIL3/

(这种)动画系统中, 指定想要动画的属性(如颜色, 动作或变形) 的起始值,结束值, 以及动画开始时间,持续时间.
基本示例:
  

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
  <animate id="animation"
    attributeName="width"   <!-- 要动画的属性 -->
    attributeType="XML"
    from="200"              <!-- 起始值 -->
    to="20"                 <!-- 结束值 -->
    begin="0s"              <!-- 开始时间 -->
    dur="5s"                <!-- 持续时间 -->
    fill="freeze" />
</rect>

于是这里关键的几个属性是 attributeName, from, to, begin, dur.

1. attributeName: 动画中应该持续改变的值, 如这里是 width;
2. attributeType: 这里 width 是一个 xml 属性; 另一种类型是 css ...
3. from, to: 属性的起始值, 结束值. 也可以用 by 取代 to.
4. begin, dur: 动画开始时间, 持续时间. 单位通过数字后的字母给出, 如 s 是秒.
5. 动画结束之后做什么: 如 fill=freeze(冻结为 to 值); 如另一个取值 remove 表示恢复到原始值.

动画时间

1. 时分秒形式:     1:20:23
2. 分秒形式:        02:15
3. 数字后跟h, min, s, ms 缩写形式:     3.5s,  1min, 1.2h 等(不能有空白)

 

同步动画

设定一个动画的开始时间为另一个动画的结束时间.

设一个 animate 为 <animate id='a1' ... />, 则另一个可引用它的时间:
   <animate begin='a1.begin+1.25s' ... />  或
   <animate begin='a1.end+3s' .../>

也能这样设置动画的 end 时间.

 

重复动作

属性 repeatCount 设定一个整形值可让动画重复该次数.

属性 repeatDur 指出重复持续多长时间; 设定为 indefinite 为不限时间(直到页面关闭).

(以上都有简单例子)

 

对复杂属性应用动画

几乎可以为任何属性(type=xml)和样式(type=css) 应用动画, 使这些属性在两个值之间平滑过渡.

对于颜色, 在 from,to 属性中给出有效的颜色即可. 颜色被认为 r,g,b 三个分量, 并分别转换到目标值. 如

    <animate attributeName='fill' from='blue' to='red' ... />

还可以为值为数字列表的属性使用动画(如路径数据, 多边形的点), 要求列表中元素数量不变. 见示例.

 

指定多个值(中间值)

例子: <animate attributeName='fill' values='red;blue;green' ... />

通过给出中间值, 允许一个 animate 定义复杂的变化序列...   从而也能实现交替来回的重复动画.

 

多级动画时间

keyTimes 属性允许以逗号分隔的时间列表(与 values 项数量一致). 第一个项始终为 0, 最后一个为 1, 中间
用 0~1 之间的小数表示, 代表动画持续时间的比例.

更多信息可参阅 SVG 规范...

 

 

<set> 元素

对于非数字属性或没有过渡性质的属性, 可能需要在动画序列的某个时点改变某个值 --> 用 set 元素.

(见示例设置一个 <text> 的 css visibility 属性值为 visible 使其可见, 当某个动画时间点)

 

<animateTransform> 元素

元素 <animate> 不适用于旋转等变换, 此时需要 <animateTransform>. 例子:

<animateTransform attributeType="XML"
      attributeName="transform" 
      type="scale"   --- 指定变换类型为 scale
      from="1" to="4 2"   --- scale 有 sx,sy 两个属性.
      begin="0s" dur="4s" fill="freeze"/>

通过指定 additive='sum' 属性, 可以设置多个动画变化效果累加, 而不是后面覆盖前面的.

 

<animateMotion> 元素

此元素使得让对象沿着任意路径运动变得很容易. (如 直线, 重复循环路径), 例子:

<animateMotion
    path="M50,125 C 100,25 150,225, 200, 125"  --- 沿着此路径移动
    rotate="auto"   --- 可指定方向
    dur="6s" fill="freeze"/>

可通过 <mpath> 子元素引用动画路径, 而非复制一个路径.

为运动指定关键点和时间

类似于上面指定中间(过渡)值. 可使用 keyTimes,keyPoints 属性指定, 得到变速运动. 细节略, 请看示例.

使用 CSS 处理 SVG 动画

第一步: 选中想要运动的元素, 将动画属性作为一个整体.
第二步: 告诉浏览器该元素的哪个属性以及什么时候, 定义在 @keyframes 说明符中.

CSS中有一组 animation-xxx 说明符 (webkit浏览器属性名前面还要加 -webkit-xxx).

看示例中的 css 写的功能和在 <animation> 中差不多, 包括 transform 属性也像.
还是先略去, 需要再查 w3c 规范吧.

 

总结

通过一组数据描述, 然后用引擎解释使对象可以丰富多彩地动画起来, 这种思想和实现都值得学习.