| 文章首页 |
|---|
| 蓝骑士SVG教程:SVG动态与动画 |
| 第一课 SVG的变形属性 |
| 第二课 SVG动画 |
| 第三课 结合JavaScript产生SVG动画 |
| 第四课 SVG鼠标事件 |
| 第五课 SVG键盘事件 |
| 第六课 动态插入SVG元素 |
页3 共7页
SVG规范包含了基于时间的简单SVG动画元素.使用这一属性,一个SVG创作者能够创作大量小到颜色渐变,大到动态滤镜效果的SVG作品,以及包含放 缩和旋转的变形,沿着一定路径的运动,甚至是根据实时键盘输入的复杂效果.这一课简单的讨论一些动画元素,如果想了解更多的细节,请参看SVG规范书. 颜色动画
我们从一些简单的颜色动画效果开始.(animateColor)元素定义了SVG颜色动画的属性."""
在上面的例子中,色彩渐变的颜色动画描述包含在了自定义的一个URI标识"gradient_star"的标签里.就像其他的SVG属性所共有的的,给 定确切的URI标识可以精确的控制某一个SVG元素.如果没有确定的URI标识,SVG将会默认的将当前描述给最近的一个目标.
<animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite" />
这里,attributeName定义了色彩动画的性质,即填充变色,attributeType定义为SVG规范中已经给出 的具有动画性质的CSS(串接样式表 Cascading Stylesheets－简称CSS).其他的attributeType还有"XML"(动态标识语言)和"auto"(默认设置). 现在,需要产生动画的元素知道了要对什么进行动画,(上面的例子中元素就是被标识的"gradient_star"),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述:
- from 定义起始数值
- to 定义结束数值
- by 定义相对的偏移值
- values 一张相对分离的数值表
运动路径
(animateMotion)标签允许元素产生一些简单的旋转,放缩,移动和倾斜变化.在(animateMotion)标签里添加路径数据,SVG元素将可以沿着路径产生运动."旋转"rotate属性控制SVG元素沿着特定路径运动时 的的旋转性质.旋转的值可以是一个相对于当前用户的图形系统中所给定的x轴定义的一个角度值,也可默认为"auto",即沿着路径方向旋转,或 是"auto-reflect",沿着路径方向的180度反方向旋转.在上面的例子中,沿垂直的八字形运动的元素旋转的值是-45度,沿着水平八字形运动 的元素旋转的值是"auto".
运动控制
默认的运动一般是线性运动.calcMode的下列属性能进一步控制元素的运动:离散
动画将在两个数值之间产生跳跃的变化.线性
默认设置.步进
类似于线性,但定义了类线性变化的间隔值.曲线
对应于按照贝赛尔曲线定义的时间-位置曲线.关键曲线
使用"曲线"模式,能够用最小的定义产生很复杂的变化.例如,实时的控制元素的x和y值,就能对应的实时控制元素的运动.使用"曲线"模式,动画元素需要包含keySplines属性值.keySplines定义了贝赛尔曲线的关键控制点,来控制动画的变化.这样的控制允许平滑的产生变化(类似于淡入淡出的平滑效果),这一点在动画中非常重要.
上面的例子,每一个小圆给定了相同的起始点和终点,但不同的keySpline值产生了不一样的效果.
下面的图表显示了每一个运动开始和结束的加速度和减速度,这些都在贝赛尔曲线中被定义.请注意上例的小圆在y轴方向的加速度和减速度的变化.
你可以更多的参看在"演示与举例"中的其他动画。
尽管SVG规范书中定义的动画特征已经非常广泛,包含了很多普遍意义的动画特征,但SVG动画结合javascript能产生更加丰富的效果.
